我们如何为图表中的每个标签设置自己的颜色

Question

我正在使用 angularjs charts。颜色是按顺序出现的，但我想为每个标签定义颜色作为我自己的选择，因为颜色含义对用户很重要。

例如： 我想要颜色为：

“已完成”：绿色
“进行中”：黄色
“未开始”：红色。

那么我如何使用我正在使用的 JS 来做到这一点。希望你能解决我的问题。期待帮助或建议。

示例数据，我正在使用：

$scope.labels = ["Completed", "In Progress", "Not started"];
$scope.data = [300, 500, 100];

简单显示图表：

 <canvas  id="pie" class="chart chart-pie" data="data" labels="labels" legend="true"
                      click="onClick" hover="onHover" series="series"></canvas>

注：当前图表显示一切正常，只是我想手动实现颜色选择。

Answer 1

您可以向 colours 提供一组对象，这些对象具有用于常规颜色的属性 strokeColor 和用于鼠标悬停颜色的 pointHighlightStroke canvas.

的属性

$scope.colours = [
    {strokeColor : "#FF00FF", pointHighlightStroke : "#FF00AA"},
    {strokeColor : "#00FFFF", pointHighlightStroke : "#00FFAA"},
    {strokeColor : "#FFFF00", pointHighlightStroke : "#FFAA00"}
];

你的HTML

<canvas  id="pie" class="chart chart-pie" data="data" labels="labels" legend="true" colours="colours"></canvas>

现在您的饼图切片和图例以您选择的颜色显示。对于工具提示颜色，您应该检查 Custom Tooltip documentation of Chart.js

Answer 2

这解决了我的问题：

$scope.labels = ["Completed", "In Progress", "Not started"];
$scope.data = [300, 500, 100];
$scope.lbl_colors = ['#33CC33', '#FFFF66', '#FF3300'];

HTML:

<canvas  id="pie" class="chart chart-pie" data="data" labels="labels" legend="true"
  click="onClick" hover="onHover" series="series" colours="lbl_colors" ></canvas>

我们如何为图表中的每个标签设置自己的颜色

How we can set our own colors for each label in charts

angularjs

chart.js