Question

我正在使用来自highchart的圆环图。我想手动更改图表每个部分的颜色。假设我想从我的代码中获得Equity：red，Debt：blue，Large Cap：green，Multi cap：brown等等。我怎样才能做到这一点？如果有人有任何想法，请与我分享。我指的是this chart。

我的代码添加在下面

function print_chart(equity_data,debt_data, equity_percent , debt_percent )
{

   $(function () {
  var donut_data_param;
  var colors = ['#483D8B','#458B00'];

  donut_data_param = [{
            y: equity_percent,
            color: colors[0],
            drilldown: {
                name: 'Equity',
                categories: ['Large Cap', 'Multi Cap', 'Mid & Small Cap','Eq Hybrid'],
                data: equity_data,
                color: colors[0]
            }
        }, {
            y: debt_percent,
            color: colors[1],
            drilldown: {
                name: 'Debt',
                categories: ['Liquid', 'Ultra short' ,'short','Debt Hybrid','FD'],
                data: debt_data,
                color: colors[1]
            }
        }];



       var categories = ['Equity','Debt'],

        data = donut_data_param,

        browserData = [],
        versionsData = [],
        i,
        j,
        dataLen = data.length,
        drillDataLen,
        brightness;


    // Build the data arrays
    for (i = 0; i < dataLen; i += 1) {

        // add browser data
        browserData.push({
            name: categories[i],
            y: data[i].y,
            color: data[i].color
        });

        // add version data
        drillDataLen = data[i].drilldown.data.length;
        for (j = 0; j < drillDataLen; j += 1) {
            brightness = 0.2 - (j / drillDataLen) / 5;
            versionsData.push({
                name: data[i].drilldown.categories[j],
                y: data[i].drilldown.data[j],
                color: Highcharts.Color(data[i].color).brighten(brightness).get()
            });
        }
    }

    // Create the chart
    $('#mychart').highcharts({
        chart: {
            type: 'pie',
             marginBottom: -40,
             marginTop: -10
        },
        legend: {
            layout: 'vertical',
            floating: true,
            align: 'left',
            verticalAlign: 'top',
            symbolPadding: 20,
            symbolWidth: 10,
            y: 100
        }, credits: {
               enabled: false
        },
        exporting: { enabled: false },
        title: {
            text: ''
        },

        // subtitle: {
        //     text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
        // },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }
        },
        plotOptions: {
            pie: {
                shadow: false,
                center: ['50%', '50%']
            }
        },
        tooltip: {
            valueSuffix: '%'
        },
        series: [{
            name: 'Percentage',
            data: browserData,
            size: '60%',
            dataLabels: {
                formatter: function () {
                    return this.y > 5 ? this.point.name : null;
                },
                color: '#ffffff',
                distance: -30
            }
        }, {
            name: 'Percentage',
            data: versionsData,
            size: '80%',
            innerSize: '60%',
            dataLabels: {
                enabled: false
            },
            showInLegend: false
        }]
    });
});



}

Answer 1

得到了解决方案。 http://jsfiddle.net/faywp9w3/

更改了此内容： - color: data[i].drilldown.colors[j]

// add version data
        drillDataLen = data[i].drilldown.data.length;
        for (j = 0; j < drillDataLen; j += 1) {
            brightness = 0.2 - (j / drillDataLen) / 5;
            versionsData.push({
                name: data[i].drilldown.categories[j],
                y: data[i].drilldown.data[j],
                color: data[i].drilldown.colors[j]
            });
        }

声明：var colors = ['#0000ff','#458B00','#658300'];

并在向下钻取中添加：colors: [colors[2],colors[1],colors[2],colors[1]]

drilldown: {
                name: 'Equity',
                categories: ['Large Cap', 'Multi Cap', 'Mid & Small Cap','Eq Hybrid'],
                data: equity_data,
                colors: [colors[2],colors[1],colors[2],colors[1]]
            }

Answer 2

jsfiddle

series: [{
        type: 'pie',
        name: 'Browser share',
        innerSize: '50%',
        data: [{
            name: 'one',
            y: 40,
            color: 'yellow' // Jane's color
        },
        {
            name: 'two',
            y: 50,
            color: 'green' // Jane's color
        },
        {
            name: 'three',
            y: 10,
            color: 'red' // Jane's color
        }                       


        ]

如何在高图中改变圆环图的颜色？

2 个答案: