javascript - 带有 Chart.js 的组合条形折线图
问题描述
我的折线图根本没有显示在我的 chart.js 上。我在这里缺少哪一块拼图?
这里还有一个显示我的代码的小提琴,您可以看到条形图按预期显示,但折线图没有。 https://jsfiddle.net/c50dfw3g/1/
我以前从未使用过这种类型的图表,所以我不确定如何设置它。提前感谢所有提供帮助的人。
var ctx = document.getElementById('myChart');
var config = {
type: 'bar',
options: {
legendCallback: function(chart) {
var text = [];
text.push('<ul class="' + chart.id + '-legend">');
var data = chart.data;
var datasets = data.datasets;
if (datasets.length) {
for (var i = 0; i < datasets.length; ++i) {
text.push('<li>');
if (datasets[i].type=='line') {
text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
} else {
text.push('<span class="'+datasets[i].type+'" style="background-color:' + datasets[i].backgroundColor + '"></span>');
}
text.push(datasets[i].label);
text.push('</li>');
}
}
text.push('</ul>');
return text.join('');
},
legend: {
display: false,
},
scales: {
xAxes: [{
type: "category",
id: "axis-bar",
}, {
type: "time",
id: "axis-time",
display: false,
}, ],
},
},
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: "Dataset1",
type: "line",
backgroundColor: "#0000FF",
borderColor: "#0000FF",
borderWidth: 1,
fill: false,
xAxisID: "axis-time",
data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
},{
label: "Dataset2",
type: "bar",
backgroundColor: "#ff0000",
borderColor: "#ff0000",
borderWidth: 1,
fill: true,
xAxisID: "axis-bar",
data: [299405,244029,247191,329711,273855,441914,426271,471912,374388,366864,326155,277442]
}]
},
};
var myChart = new Chart(ctx, config);
var legend = myChart.generateLegend();
document.getElementById("legend").innerHTML = legend;
解决方案
尝试对两个数据集使用相同的 X 轴:
scales: {
xAxes: [{
type: "category",
id: "axis-bar",
}/* Commenting out the second axis, {
type: "time",
id: "axis-time",
display: true,
}, */],
},
现在,我们将line
数据集设置为使用此 X 轴:
datasets: [{
label: "Dataset1",
type: "line",
backgroundColor: "#0000FF",
borderColor: "#0000FF",
borderWidth: 1,
fill: false,
xAxisID: "axis-bar",
data: [12296,12381,9141,24203,21987,21801,65394,91892,57645,44637,22631,17502]
},
现在我们开始:
推荐阅读
- firefox - 部分 Javascript 无法在 Mozilla Firefox 或 Safari 上运行
- django - Django - 电子邮件模板中的 Html 标签
- r - 如何根据 dplyr 中另一组的滤液提取一组的信息
- r - R-使用dplyr中的权重数据框总结每一列?
- java - 更新表时字段更新为空
- javascript - Android 中未显示 Unicode 符号 - Chrome
- c# - 反射 int32,布尔运算符
- node.js - 我的请求正文很长。通过 Cypress 进行 API 测试时如何处理它
- mysql - MySQL cur.rowcount = -1。这意味着什么以及如何解决它
- json - Kotlin 拒绝传递参数