Question

我正在使用angularjs charts。颜色按顺序排列，但我想为每个标签定义颜色作为我自己的选择，因为颜色意味着对用户很重要。

例如：我希望颜色为：

＆＃34;已完成＆＃34;：绿色
＆＃34;进行中＆＃34;：YELLOW
＆＃34;未开始＆＃34;：RED。

那么我怎样才能使用我正在使用的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

您可以为常规颜色提供属性strokeColor的对象数组，并为pointHighlightStroke提供colours鼠标悬停颜色画布的属性。

$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>

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

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>

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

2 个答案: