How to set individual colors for high chart pies
我可以通过传递
在以下示例中,我能够看到浅蓝色,黑色和绿色。但是,如何设置预定义的颜色。例如,我想改用橙色,红色和黄色。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | // Build the chart Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Browser market shares in January, 2018' }, tooltip: { pointFormat: '{series.name}: {point.percentage:.1f}%' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true } }, series: [{ name: 'Brands', colorByPoint: true, data: [{ name: 'Chrome', y: 61.41, sliced: true, selected: true }, { name: 'Internet Explorer', y: 11.84 }, { name: 'Firefox', y: 10.85 }] }] }); |
1 2 3 4 | <script src="https://code.jquery.com/jquery-3.1.1.min.js"> <script src="https://code.highcharts.com/highcharts.js"> <script src="https://code.highcharts.com/modules/exporting.js"> <script src="https://code.highcharts.com/modules/export-data.js"> |
您可以使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | Highcharts.setOptions({ colors: ['#ff6600', '#ff0000', '#ffff00'] }); // Build the chart Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, title: { text: 'Browser market shares in January, 2018' }, tooltip: { pointFormat: '{series.name}: {point.percentage:.1f}%' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true } }, series: [{ name: 'Brands', colorByPoint: true, data: [{ name: 'Chrome', y: 61.41, sliced: true, selected: true }, { name: 'Internet Explorer', y: 11.84 }, { name: 'Firefox', y: 10.85 }] }] }); |
1 2 3 4 | <script src="https://code.jquery.com/jquery-3.1.1.min.js"> <script src="https://code.highcharts.com/highcharts.js"> <script src="https://code.highcharts.com/modules/exporting.js"> <script src="https://code.highcharts.com/modules/export-data.js"> |