我尝试用 ChartJS 绘制折线图。我的代码在这里jsfiddle.net/mhgyqpq0/1/
如何为工具提示中的每个项目设置颜色,如下所示
最佳答案
如果您希望工具提示的颜色与图例的颜色相同,则需要修改pointColor
选项。
找到我的Fiddle ;).
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(255, 0, 0, 0.0)",//"rgba(220,220,220,0.2)",
strokeColor : "red",//"rgba(220,220,220,1)",
pointColor : "red",//"rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(0, 0, 255, 0.0)",//"rgba(151,187,205,0.2)",
strokeColor : "blue",//"rgba(151,187,205,1)",
pointColor : "blue",//"rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Third dataset",
fillColor : "rgba(0, 255, 0, 0.0)",//"rgba(100,100,205,0.2)",
strokeColor : "green",//"rgba(151,187,205,1)",
pointColor : "green",//"rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
bezierCurve: false,
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>",
});
var legend = myLine.generateLegend();
document.getElementById("legend").innerHTML = legend;
关于javascript - 如何使用 ChartJS 设置工具提示中每个项目的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30661459/