饼图颜色不变

Question

我正在使用 canvasjs 制作饼图。我在我的自定义代码中使用它，在 xml 文件中从服务器获取响应，然后我使用它来填充图表值。我的问题是我无法更改图表的颜色，这意味着即使对于不同的标签，整个饼图的颜色也保持不变。

我也使用了调试器，它的颜色值正在改变，但我仍然无法解决它。

  color: scopes.chart_color_value[i]

我正在使用另一个存储颜色值的配置文件。

这是我的自定义代码

$scope.loadChartValue = function (data, scopes) {
    scopes.data_id = [];
    scopes.legend_text = "";
    scopes.inner_chart_data = [];

    for (var i = 0; i <= data.length; i++) {
        var arrayvalue = data[0].data[i]._attr
        if (existsInArray(scopes.data_id, arrayvalue.label._value) == false) {
            scopes.data_id.push(arrayvalue.label._value);
        }
    }
        scopes.inner_chart_data = [];
        var i=1;
        for (var j = 0; j < data[0].data.length; j++) {
            scopes.inner_chart_data.push({ label: data[0].data[j]._attr.label._value, y: data[0].data[j]._attr.value._value });

        scopes.dataset.push(
                   {
                       type: "pie",

                       markerType: "circle",
                       markerSize: scopes.markersize,
                       color: scopes.chart_color_value[i],
                       showInLegend: false,
                       name: scopes.legend_text,
                       dataPoints: scopes.inner_chart_data
                   }
           );
           i++;
        }

}

Answer 1

您似乎正在创建 2 个 data-series 而不是 1 个 data-series 和 2 个数据点。当颜色设置为data-series级别时，整个饼图变成单色，所以尝试将其更改为data-point级别。

以下代码应该可以正常工作。

for (var j = 0; j < data[0].data.length; j++) {
    scopes.inner_chart_data.push({ label: data[0].data[j]._attr.label._value, y: data[0].data[j]._attr.value._value, color: scopes.chart_color_value[i], });
    i++;
}
scopes.dataset.push(
    {
       type: "pie",
       markerType: "circle",
       markerSize: scopes.markersize,                       
       showInLegend: false,
       name: scopes.legend_text,
       dataPoints: scopes.inner_chart_data
    }
);

饼图颜色不变

Pie chart color not changing

html

javascript

angularjs

canvasjs