Блог

Главная - Вопросы по программированию - Круговая диаграмма изменение цвета Библиотека высоких диаграмм

Круговая диаграмма изменение цвета Библиотека высоких диаграмм

#javascript #css #highcharts

#javascript #css #высокие диаграммы

Вопрос:

Я использую библиотеку High Chart Js для своего проекта. Я создал круговую диаграмму. работает хорошо. как мне нужно изменить цвета круговой диаграммы. как я это делаю? Пожалуйста, проверьте мой код javascript

Highcharts.chart(‘false-positive-graph’, { диаграмма: { тип: ‘круговой’ },

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

мой вид диаграммы, как показано на рисунке ниже.
круговая диаграмма

Комментарии:

1. Вам нужно использовать атрибут colors . Вы можете проверить один пример здесь jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree /…

2. @pc_coder как изменить свой код для добавления атрибута цвета??

Ответ №1:

вам нужно добавить атрибут colors в chartoptions, как показано ниже

   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>