chart.js变态堆叠柱状图

[李苗苗00000]

如何用chart.js实现两组堆叠柱状图，可以实现吗

[李苗苗00000]

scales: { xAxes: [{ stacked: true, }], yAxes: [{ stacked: true }] } 加上这个才有堆叠的效果哦

[yaomieyu5613]

为什么我的chart.js显示的柱形图在浏览器上是铺满整个浏览器页面的，你知道怎么调小点吗 <canvas id="canvas" width="300" height="150"></canvas>还是很大啊

[西萌萌]

可以用不同的stack名称： var barChartData = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: 'Dataset 1', backgroundColor: window.chartColors.red, stack: 'Stack 0', data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ] }, { label: 'Dataset 2', backgroundColor: window.chartColors.blue, stack: 'Stack 0', data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ] }, { label: 'Dataset 3', backgroundColor: window.chartColors.green, stack: 'Stack 1', data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ] }, { label: 'Dataset 4', backgroundColor: window.chartColors.green, stack: 'Stack 1', data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ] }] }; 楼主是要这个效果吗？

[业余草]

可以实现的，官方文档多看看！

[宝丶哥]

var ajax = new $ax(Feng.ctxPath + "/smartDevice/DeviceCountChart/" + Year, function (data) {
// 初始化图表标签
var myChart = echarts.init(document.getElementById('chart'));
var options = {
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ["冰箱","小米笔记本","微波炉","无人机","油烟机","海尔冰箱","热水器","电磁炉","电脑","电视","空调","衣柜"]
},
grid: {
left: '3%',
right: '4%',
bottom: '5%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value',
name: '数量',
min: 0, //y轴最小值
max: 15, //y轴最大值
interval: 3, //每X个值为一个阶段
axisLabel: {
formatter: '{value}件'
}
}
],
series: [
{
"type":"bar",
"data":[0,0,0,0,0,1,0,0,0,0,0,0],
"name":"冰箱"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,1,0,0,0,0,0],
"name":"小米笔记本"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,1,0,0,0,0,0],
"name":"微波炉"
},
{
"type":"bar",
"data":[0,0,0,0,0,1,0,0,0,0,0,0],
"name":"无人机"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,1,0,0,0,0,0],
"name":"油烟机"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,0,0,0,0,0,0],
"name":"海尔冰箱"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,1,0,0,0,0,0],
"name":"热水器"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,1,0,0,0,0,0],
"name":"电磁炉"
},
{
"type":"bar",
"data":[0,0,0,0,0,1,1,0,0,0,0,0],
"name":"电脑"
},
{
"type":"bar",
"data":[0,0,0,0,0,3,2,0,0,0,0,0],
"name":"电视"
},
{
"type":"bar",
"data":[0,0,0,0,0,0,2,0,0,0,0,0],
"name":"空调"
},
{
"type":"bar",
"data":[0,0,0,0,0,1,0,0,0,0,0,0],
"name":"衣柜"
}
]
};
myChart.setOption(options);
}, function (data) {
Feng.error("图表加载失败!");
});
ajax.start();
}

[宝丶哥]

这是我项目的一个画图，你可以把从这：
// 初始化图表标签
var myChart = echarts.init(document.getElementById('chart'));
开始，到这：
myChart.setOption(options);
结束的代码拿到出来放到html页面做测试，可能要微调一下，因为：
legend: {
data: 这里的值是动态获取的。 没图的话检查下这里写错没有。
}
和：
series: [
这里也是动态获取的。 没图的话检查下这里写错没有。
]