在highcharts的金字塔图与diff颜色

问题描述 投票:-2回答:1

您应该更改组件,如下所示

导入Highcharts和漏斗

import * as Highcharts from 'highcharts';

require('highcharts/modules/funnel')(Highcharts);

宣布

var require: any;   
    chart: any;

在ngOnInit中添加此项

Highcharts.chart('jaibalaya', {
  chart: {
    type: 'pyramid'
  },
  title: {
    text: '',
    x: -50
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b> ({point.y:,.0f})',
        color: 'black'
      }
    }
  },

  legend: {
    enabled: true
  },
  credits: {
    enabled: false
  },
  series: [{
    data: [
      ['Inactive', 15],
      ['Small', 20],
      ['Medium', 25],
      ['Big', 20],
      ['Top', 10]
    ]
  }]
});

HTML中的变化

<div id="jaibalaya" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto">
</div>
highcharts
1个回答
0
投票

要更改pyramid图表中的颜色,您可以使用colors数组:

Highcharts.chart('jaibalaya', {
    chart: {
        type: 'pyramid'
    },
    colors: ['red', 'yellow', 'blue', 'green', 'orange'],
    ...
});

现场演示:http://jsfiddle.net/BlackLabel/0vqr35jn/

API参考:https://api.highcharts.com/highcharts/colors

© www.soinside.com 2019 - 2024. All rights reserved.