Chart.js圆环文字颜色

时间:2015-04-28 21:30:59

标签: javascript css chart.js

如何分别更改甜甜圈文字颜色和甜甜圈填充颜色?我有这样的事情:

var  color = [ "#3F9F3F", "#FFFFFF" ];
var chartData =  {
  label :  myLabels, 
  data : myData,
  colors : color
};

第二个颜色属性会覆盖我尝试过的任何其他颜色。具体来说,对于甜甜圈来说,什么属性可以解决这个问题?

enter image description here

我希望文字颜色与图表中的黑色不同。

修改

这是我发现的一个jsfiddle,它显示了一个基本的图表。

http://jsfiddle.net/mayankcpdixit/6xV78/

问题是,如何更改甜甜圈内的字体颜色?

编辑2:

实现了甜甜圈内部的文本颜色,受二次色影响,实际上是使用canvas.fillText()绘制的。因此,我需要的只是添加.fillStyle =“无论什么”,它可以工作。

2 个答案:

答案 0 :(得分:0)

更改

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(pieData,{percentageInnerCutout : 80});

通过

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(pieData,doughnutOptions);

您可以在http://www.chartjs.org/docs/#getting-started-global-chart-configuration

找到所有可用选项

对于您的彩色文字,您可以添加此选项

var doughnutOptions= {
 scaleLabel: '<p style="color: red"><%=value%></p>'
}

根据您想要的颜色更改style="color: red"

答案 1 :(得分:0)

实现了甜甜圈内部的文本颜色,受二次色影响,实际上是使用canvas.fillText()绘制的。因此,我需要的只是添加.fillStyle =“无论什么”,它可以工作。