饼图颜色变化高图表库答案

【问题标题】：Pie chart color change High Chart Library饼图颜色变化高图表库
【发布时间】：2020-09-30 13:04:04
【问题描述】：

我正在为我的项目使用 High Chart Js 库。我创建了饼图。它运作良好。我需要如何更改饼图颜色。我怎么做？请检查我的javascript代码

Highcharts.chart('假阳性图', { 图表： { 类型：“馅饼” },

            title: {
                  text: 'False Positive % Suspicious incidents',
                style: {fontSize: '12px',
                    fontFamily :"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
                    fontWeight: 'bold',
                    color: '#black',
                    position:'top'
                  }

            },
            credits: {enabled: false},
            legend: {enabled: false},
            tooltip: {
                headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.percentage:.1f}%</b> of total<br/>'
            },
  
            series: [
                {
                    name: "",
                    colorByPoint: true,
                    data: $scope.actionCount
                     
                }
            ],
            drilldown: {
                drillUpButton: {
                    position: {
                        relativeTo:"plotBox",
                        verticalAlign: 'right'
                    }
                },
              
                series: [
                    {
                        name: "REPORT",
                        id: "REPORT",
                        data: $scope.reportCount
                        
                    },
                    {
                        name: "DISCOUNT",
                        id: "DISCOUNT",
                        data: $scope.discountCount
                    }
                    
                ]
               
            }
        });

我的图表视图如下图。

【问题讨论】：

您需要使用颜色属性。你可以在这里查看一个例子jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/…
@pc_coder 我如何更改添加颜色属性的代码？？

标签： javascript css highcharts

【解决方案1】：

您需要为图表选项添加颜色属性，如下所示

  Highcharts.setOptions({
     colors: ['#50B432', '#ED561B']
  });

示例演示

$(function () {
    
    Highcharts.setOptions({
     colors: ['#50B432', '#ED561B']
    });
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',

            },
            title: {

                text: 'Browser market shares at a specific website, 2010'

            },        
            series: [{

                type: 'pie',

                name: 'Example',

                data: [

                    ['One',   45.0],

                    ['Two',       26.8],

                ]

            }]

        });

    });
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

【讨论】：