高图表圆环图渲染中缺少颜色

Missed colors in Highcharts donut chart rendering

本文关键字：颜色 圆环图 高图表      更新时间：2023-09-26

我对Highcharts圆环图有问题，有大量数据。渲染中会丢失最后的颜色。将鼠标移动到空白区域上，将显示颜色。

http://jsfiddle.net/2t93vthq/

我已经尝试过没有选项 plotOptions.pie.animate = false没有成功。

有什么想法吗？

发生这种情况是因为您使用的是Highcharts的默认颜色集，默认情况下包含10种不同的颜色，并且由于您使用迭代器作为颜色索引，因此您希望获得某些颜色的undefined（换句话说，从第11点开始）。

无论如何，您始终可以创建自己的颜色集：

var myColors = ['red','blue','yellow'....]

或者也许使用一个更"足够复杂"的颜色生成器来为您创建一个颜色集（就像我刚刚用谷歌搜索的这个：http://www.paulirish.com/2009/random-hex-color-code-snippets/）

或者，如果您想坚持使用预定义的颜色集，则可以使用不同的方法为每次迭代选择颜色，例如使用"圆形"计数器：

    var data=[];
    var currentColor = 0;
    for(i in d){
        data.push({
                y: d[i].perc,
                color: colors[currentColor],
                drilldown: {
                    name: d[i].label,
                    categories: d[i].disc_eti,
                    data: d[i].disc_perc,
                    color: colors[0]
                }
        });
        currentColor = currentColor < 9 ? currentColor + 1 : 0;
    }

这将保证您不会使用丢失的颜色。http://jsfiddle.net/xw75je1h/1/

相关文章：