我正在尝试在chart.js中制作条形图(使用chart.js 2.2.2)
我在尝试将新数据集放入图表时遇到麻烦
我如何放置带有数据的新数据集“ Vendas”:[10,20,30,40,50,60,70]
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Compras",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var ctx = $("#barOrgaoAno").get(0).getContext("2d");
var myBarChart = new Chart(ctx,{
type: "bar",
data: data,
});
我试过两个例子,但都无法正常工作
例子1
barChartDemo.addData([dData()], "dD " + index);
例2
var myNewDataset = {
label: "My Second dataset",
fillColor: "rgba(187,205,151,0.5)",
strokeColor: "rgba(187,205,151,0.8)",
highlightFill: "rgba(187,205,151,0.75)",
highlightStroke: "rgba(187,205,151,1)",
data: [48, 40, 19, 86, 27, 90, 28]
}
var bars = []
myNewDataset.data.forEach(function (value, i) {
bars.push(new myBarChart.BarClass({
value: value,
label: myBarChart.datasets[0].bars[i].label,
x: myBarChart.scale.calculateBarX(myBarChart.datasets.length + 1, myBarChart.datasets.length, i),
y: myBarChart.scale.endPoint,
width: myBarChart.scale.calculateBarWidth(myBarChart.datasets.length + 1),
base: myBarChart.scale.endPoint,
strokeColor: myNewDataset.strokeColor,
fillColor: myNewDataset.fillColor
}))
})
myBarChart.datasets.push({
bars: bars
})
myBarChart.update();
由于您将图表数据存储在变量中(data
在代码中称为),因此可以通过按钮上的简单函数来实现:
$('button').click(function() {
// You create the new dataset `Vendas` with new data and color to differentiate
var newDataset = {
label: "Vendas",
backgroundColor: 'rgba(99, 255, 132, 0.2)',
borderColor: 'rgba(99, 255, 132, 1)',
borderWidth: 1,
data: [10, 20, 30, 40, 50, 60, 70],
}
// You add the newly created dataset to the list of `data`
data.datasets.push(newDataset);
// You update the chart to take into account the new dataset
myBarChart.update();
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句