【发布时间】：2019-08-09 21:44:36
【问题描述】：
我试图在将动态创建的面积图中设置多个数据集。数据集显示在图表中，但由于某种原因，没有为通过我的方法放置的数据集设置默认背景颜色。该方法中的所有其他内容似乎都设置正确。背景颜色甚至在图例背景中设置正确，但未在图表上设置
这是我的功能
function createNewDataset(data, labels) {
let newDataSet = [];
newDataSet['label'] = "Test";
newDataSet['lineTension'] = 0.3;
newDataSet['backgroundColor'] = "rgba(102,223,56,0.71)";
newDataSet['borderColor'] = "rgb(114,223,52)";
newDataSet['pointRadius'] = 3;
newDataSet['pointBackgroundColor'] = "rgb(91,223,88)";
newDataSet['pointBorderColor'] = "rgb(93,223,65)";
newDataSet['pointHoverRadius'] = 3;
newDataSet['pointHoverBackgroundColor'] = "rgb(89,223,47)";
newDataSet['pointHoverBorderColor'] = "rgb(125,223,72)";
newDataSet['pointHitRadius'] = 10;
newDataSet['pointBorderWidth'] = 2;
newDataSet['data'] = [0, 10000, 5000, 15000, 100000, 20000, 15000, 25000, 20000, 30000, 25000, 40000];
return newDataSet;
}
这是数据集的硬编码创建
function createLinechart(){
// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "Sep", "Oct", "Nov", "Dec"],
datasets: [
createNewDataset(),{
label: "Civic",
lineTension: 0.3,
backgroundColor: "rgba(222,43,223,0.25)",
borderColor: "rgb(223,40,38)",
pointRadius: 3,
pointBackgroundColor: "rgb(223,52,49)",
pointBorderColor: "rgb(223,82,31)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgb(223,40,38)",
pointHoverBorderColor: "rgb(223,40,38)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: [0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000],
},{ label: "Accord",
lineTension: 0.6,
backgroundColor: "rgba(82,119,223,0.54)",
borderColor: "rgba(78, 115, 223, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(78, 115, 223, 1)",
pointBorderColor: "rgba(78, 115, 223, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: [0, 10000, 5000, 1000, 10000, 2000, 10000, 20000, 25000, 10000, 25000, 40000],}],
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
time: {
unit: 'date'
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
maxTicksLimit: 7
}
}],
yAxes: [{
ticks: {
maxTicksLimit: 5,
padding: 10,
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [3],
zeroLineBorderDash: [2]
}
}],
},
legend: {
display: true
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: 'index',
caretPadding: 10,
}
}
});}
这是图表的图像。 从图表中弹出的线应具有绿色背景色，如图例所示。 ![折线图][1]：https://imgur.com/a/CdvSBPw
编辑带有动态数据的新图像。他们把所有东西都设置好了，除了背景颜色 [林查特][2]:https://imgur.com/a/6gSLqMp
【问题讨论】：
-
提供的来源和图像是如此不同，以至于我很难相信它们是一致的；换句话说，其中一个或另一个已被修改。源代码不包含绿色，也没有
data或label参数的参数。您能否包含与源完全相同状态的图像（反之亦然）？ -
是的，我同意。我刚刚更新了图像。我只是更改了颜色以显示背景实际上是在图例中初始化，而不是在图表背景中，就像您使用硬编码值进行初始化时一样。我的方法 createNewDataset 与硬编码值基本相同，但在一个数组中。
-
似乎是图表 js 中的一个错误，因为其他所有内容都在正确初始化。如果我们使用 { } 而不是 array [] 背景设置正确。但是没有办法以这种方式创建多个数据集
-
很酷，谢谢，我现在清楚地看到了这个问题。是的，这很奇怪。您可以通过跳过
createNewDataset函数并将“测试”数据集直接硬编码到其他 2 个硬编码数据集旁边来简化问题。尝试缩小明显的错误：例如你能排除你的createNewDataset函数实现是问题的可能性吗（在我看来没问题）？即使所有内容都是硬编码的，第一个数据集是否总是无法呈现背景颜色？数据集的数量重要吗？等 -
数据集的数量无关紧要。如果它是一个数据集，如果它与我的方法一起使用，背景颜色仍然不会初始化。我真的需要这种方法，因为当用户要求特定的统计报告时，我的图表现在正在动态生成。观看我的第二次编辑。图表现在看起来像这样
标签： javascript chart.js