我正在尝试更改几个数据点之间的填充颜色,例如点1,2之间是黑色,点3-5之间是红色。
一个例子是amCharts:http://www.amcharts.com/demos/line-with-changing-color/
我尝试更改某个点的fillColor属性,但似乎只是改变了点的填充颜色。
var chart = new Chart(ctx).LineWithLine(data, options);
chart.datasets[0].points[0].fillColor = "purple";
chart.datasets[0].points[1].fillColor = "purple";
chart.datasets[0].points[2].fillColor = "purple";
chart.update();
如果我更改选项中的填充颜色,我会看到图表的填充颜色按预期更改。我使用了错误的属性还是库中有错误?
JS小提琴:https://jsfiddle.net/hdnu4bpa/
p / s:This question只会改变点的颜色,这不是我想要的。
答案 0 :(得分:3)
填充颜色适用于整个系列,而不适用于点之间的区域。
但是,由于您没有工具提示(您将tooltipEvents设置为空数组),您可以使用3个不同的系列实现您想要的效果,并且Chart.js不会绘制空值。
这就是它的样子
我们制作了3个系列(如果您的数据和范围是动态的,那么您可以通过编程方式执行此操作 - 这更像是一个JavaScript问题,而不是Chart.js之一)
var data = {
labels: ["-2h", "-10m", "-7m", "-2m", "-5s"],
datasets: [{
data: [12.5, 3.1, null, null, null],
fillColor: "rgba(151,205,187,0.2)",
strokeColor: "rgba(151,205,187,1)",
pointColor: "rgba(151,205,187,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,205,187,1)",
}, {
data: [null, 3.1, 3.3, 4.2, null],
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
}, {
data: [null, null, null, 4.2, 15.5],
fillColor: "rgba(205,151,187,0.2)",
strokeColor: "rgba(205,151,187,1)",
pointColor: "rgba(205,151,187,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(205,151,187,1)",
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var options = {
showTooltips: false,
datasetFill: true,
}
var chart = new Chart(ctx).Line(data, options);
我刚刚调整了你的小提琴中的代码来显示相关位(它可以与你的LineWithLine扩展同样好用)
如果您希望某些颜色出现在路口的顶部(数据中的-10米和-2米),则可以重新排列系列。后来的系列'颜色优先。