如何在Highchart中更改甜甜圈图的颜色?

普里扬克·迪

我正在使用highchart的甜甜圈图。我想手动更改图表各部分的颜色。假设我想从我的代码中获得Equity:red,Debt:blue,Large Cap:Green,Multi cap:Brown等。我怎样才能做到这一点?如果有人有什么想法请与我分享。我指的是这张图

我的代码添加如下

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
        }]
    });
});



}
普里扬克·迪

得到了解决方案。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]]
            }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在ggplot2中使用facet_grid制作甜甜圈图?

甜甜圈图python

如何在半甜甜圈图的两半上设置标签?

Chart.js(甜甜圈图)中的内部半径未更改

matplotlib中的双甜甜圈图

如何在打字稿中将C3甜甜圈图制作成半圆或半甜甜圈图?

需要更改标题颜色甜甜圈highchart

如何使用matplotlib在tkinter中制作甜甜圈图

如何在matplotlib pyhon的甜甜圈饼图中制作子图

如何在散点图上的点周围绘制甜甜圈图?

如何在chartjs中扩展甜甜圈图的切片?

如何在Flutter中的“甜甜圈饼图”的孔内添加文本

如何在echarts的每个甜甜圈图切片上显示数据值

如何在带有图例的甜甜圈图的中间显示标题?(react-highcharts)

情节:如何在甜甜圈图中自定义颜色?

从PrimeReact更改甜甜圈图的标签位置

更改甜甜圈图的边框颜色

如何清理甜甜圈图?

如何在甜甜圈图切片上显示图像?

如何删除甜甜圈图边框

如何找到饼图/甜甜圈图的半径

如何在角度图表的甜甜圈图中为数据项分配特定的颜色?

如何在IE中显示SVG甜甜圈图?

如何使用数据库中的数据绘制Google饼图(或甜甜圈图)

如何在Xamarin.android中使用oxyplot创建甜甜圈图?

如何在核心图框架Objective-C中创建甜甜圈图?

更改字体家族的莫里斯甜甜圈图

单击切片时如何更改甜甜圈图中的切片颜色?

如何从highchart中的相应位置开始半圆甜甜圈图角度?