【问题标题】:How to set color of each slice in pie chart in high charts library?如何在highcharts库的饼图中设置每个切片的颜色?
【发布时间】:2015-07-08 17:33:07
【问题描述】:

我正在从高图表库制作饼图。我想改变饼图中每个切片的颜色 我怎样才能做到这一点 ?我的代码是 -

var colors = ["color:'#2a8482'","color:'#64DECF'","color:'#BCCDF8'"]; 
var responseData = {"2":40,"1":30}
var obj =  $.parseJSON(responseData);
             var dataArrayFinal = Array();
             var value = Array();
             var name = Array();
             var j = 0;
             for (var key in obj) {
                  if (obj.hasOwnProperty(key)) {
                      name[j] =  "name:'"+key+"'";
                      value[j] = obj[key];
                      j++;
                  }
             }

             for(k=0;k<name.length;k++) { 
                   var temp = new Array(name[k],value[k],colors[k]); 
                   dataArrayFinal[k] = temp;     
             }

            $(function () {

                new Highcharts.Chart({
                    chart: {
                        renderTo: 'container'+counter,
                        type: 'pie',
                        height: 280,
                        width: 280
                    },
                    title: {
                        text: ' '
                    },
                    tooltip: {
                        valueSuffix: '%',
                        positioner: function () {
                            return {
                                x: this.chart.series[0].center[0] -
                                   (this.label.width / 2) + 8,
                                y: this.chart.series[0].center[1] -
                                   (this.label.height / 2) + 8
                            };
                        }
                    },
                    series: [{
                        name: 'Answer',
                        size: '100%',
                        innerSize: '65%',
                        data: dataArrayFinal
                    }]
                });
            });

在这个图表即将到来但颜色没有改变。它们采用默认颜色。

【问题讨论】:

    标签: javascript charts highcharts


    【解决方案1】:
    Highcharts.setOptions({
     colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
    });
    

    它应该这样工作;-)

    【讨论】:

    【解决方案2】:

    如果您将颜色数组更改为:

    var colors = ["#2a8482","#64DECF","#BCCDF8"];

    然后在函数的开头:

    $(function () {
    

    添加以下代码:

    Highcharts.getOptions().plotOptions.pie.colors = colors;
    

    这应该可以解决问题。

    可以在这个由 HighCharts 开发人员创建的 JSFiddle 中找到着色示例: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/pie-monochrome/

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-12-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多