highcharts 使用不显示不同颜色的高度图的角形朝阳图

kupeojn6 于 2023-03-18 发布在 Highcharts

关注(0)|答案(1)|浏览(159)

我正在尝试使用Highcharts在Angular中显示一个朝阳图。图表可以显示，但是颜色有问题。我提到了一个颜色数组，但是图表只显示了数组中的第一个颜色。有人能告诉我这里做错了什么吗？

以下是我的代码：

this.chart = Highcharts.chart('container', {

      chart: {
        type: 'sunburst',
        height: '100%'
      },
      colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
        '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'], 
      title: {
          text: 'PSec GEARS Function Usage'
      },
      subtitle: {
          text: 'Top 10 Functions used as % per User for the last Month'
      },
      credits: {
          enabled: false
      },
      tooltip: {
        headerFormat: '',
        pointFormat: 'The population of <b>{point.name}</b> is <b>{point.value}</b>'
      }, 

      series: [{
        type: "sunburst",
        data: this.dataValues,
        cursor: 'pointer',
        dataLabels: {
            format: '{point.name}',
            filter: {
                property: 'innerArcLength',
                operator: '>',
                value: 16
            },
            rotationMode: 'circular'
        },
        
        levels: [{
          level: 1,
          dataLabels: {
            filter: {
              property: 'outerArcLength',
              operator: '>',
              value: 64
            }
          }
        }, {
          level: 2,
          colorByPoint: true
        },
        {
          level: 3,
          colorVariation: {
            key: 'brightness',
            to: -0.5
          }
        }, {
          level: 4,
          colorVariation: {
            key: 'brightness',
            to: 0.5
          }
        }]
      }]
    });

这是我得到的输出图表的图像：

highcharts

来源：https://stackoverflow.com/questions/75711494/sunburst-chart-in-angular-using-highcharts-not-showing-different-colors

1条答案

按热度按时间

moiiocjp1#

您没有在发送的代码中包含数据，因此很难说您到底做错了什么，但朝阳图表中的数据结构应该如下所示：

Highcharts.chart('container', {
    chart: {
      type: 'sunburst'
    },
    colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce',
      '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'], 
    series: [{
      type: "sunburst",
      data: [
        {
          id: '0.0',
          parent: '',
          name: 'Main'
        }, {
          id: '1.1',
          parent: '0.0',
          name: 'A'
        }, {
          id: '1.2',
          parent: '0.0',
          name: 'B'
        },
        {
          id: '1.3',
          parent: '0.0',
          name: 'C'
        },
        {
          id: '2.1',
          parent: '1.1',
          name: 'A1',
          value: 10
        }, {
          id: '2.2',
          parent: '1.1',
          name: 'A2',
          value: 5
        },
        {
          id: '2.3',
          parent: '1.2',
          name: 'B1',
          value: 12
        },
        {
          id: '2.4',
          parent: '1.2',
          name: 'B2',
          value: 8
        },
        {
          id: '2.5',
          parent: '1.3',
          name: 'C1',
          value: 15
        },
        {
          id: '2.5',
          parent: '1.3',
          name: 'C2',
          value: 7
        },
        
        {
          id: '2.5',
          parent: '1.3',
          name: 'C3',
          value: 11
        },
      ],
      levels: [{
        level: 1,
        dataLabels: {
          filter: {
            property: 'outerArcLength',
            operator: '>',
            value: 64
          }
        }
      }, {
        level: 2,
        colorByPoint: true
      },
      {
        level: 3,
        colorVariation: {
          key: 'brightness',
          to: -0.5
        }
      }, {
        level: 4,
        colorVariation: {
          key: 'brightness',
          to: 0.5
        }
      }]
    }]
  });

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>

<div id="container"></div>

官方演示：https://www.highcharts.com/demo/sunburst
API：https://api.highcharts.com/highcharts/series.sunburst.data

赞(0）回复(0）举报 2023-03-18

我来回答

highcharts 使用不显示不同颜色的高度图的角形朝阳图

1条答案

相关问题

热门标签

最新问答