javascript - Highcharts : sunburst chart not displaying

Question

我正在尝试使用 Highchart 生成旭日图。作为引用，我使用 demo for the same from Highchart site

我根据我的要求修改了数据，但我想我错过了一些东西，因为它不起作用。

这是我的 jsfiddle

 data: [
            {
            'id': '0.0',
            'parent': '',
            'name': 'TCI'
            },            
        {
            'id': '1.2',
            'parent': '0.0',
            'name': 'CM'
        },
        {
            'id': '1.1',
            'parent': '0.0',
            'name': 'AS'
        },
                    {
            'id': '2.1',
            'parent': '1.1',
            'name': 'R&D',
            'value': 104
        },
        {
            'id': '2.5',
            'parent': '1.1',
            'name': 'AE',
            'value': 90
        },
        {
            'id': '2.3',
            'parent': '1.1',
            'name': 'Engineering Learning Center ',
            'value': 51
        },
        {
            'id': '2.2',
            'parent': '1.1',
            'name': 'Human Resources',
            'value': 51
        },
        {
            'id': '2.4',
            'parent': '1.1',
            'name': 'Accessories',
            'value': 43
        },
        {
            'id': '2.9',
            'parent': '1.2',
            'name': 'Accounts and Finance',
            'value': 30
        },
        {
            'id': '2.8',
            'parent': '1.2',
            'name': 'FO',
            'value': 56
        },
        {
            'id': '2.7',
            'parent': '1.2',
            'name': 'CD',
            'value': 129
        },
        {
            'id': '2.6',
            'parent': '1.2',
            'name': 'CA',
            'value': 109
        }
        ]

这是我要在图表上显示的数据

我可以请任何人帮助我解决这个问题。

Answer 1

您没有将 data 正确传递给容器，因此它没有呈现。

将您的data 传递给var data，如下所示，而不是直接将您的数据(即对象数组)添加到图表数据集对象中:

var data = [{'id':'0.0','parent':'','name':'TCI'},{'id':'1.2','parent':'0.0','name':'CM'},{'id':'1.1','parent':'0.0','name':'AS'},{'id':'2.1','parent':'1.1','name':'R&D','value':104},{'id':'2.5','parent':'1.1','name':'AE','value':90},{'id':'2.3','parent':'1.1','name':'Engineering Learning Center ','value':51},{'id':'2.2','parent':'1.1','name':'Human Resources','value':51},{'id':'2.4','parent':'1.1','name':'Accessories','value':43},{'id':'2.9','parent':'1.2','name':'Accounts and Finance','value':30},{'id':'2.8','parent':'1.2','name':'FO','value':56},{'id':'2.7','parent':'1.2','name':'CD','value':129},{'id':'2.6','parent':'1.2','name':'CA','value':109}];

下面是工作JSFIDDLE :

下面的工作片段:

var data = [{
    'id': '0.0',
    'parent': '',
    'name': 'TCI'
  },
  {
    'id': '1.2',
    'parent': '0.0',
    'name': 'CM'
  },
  {
    'id': '1.1',
    'parent': '0.0',
    'name': 'AS'
  },
  {
    'id': '2.1',
    'parent': '1.1',
    'name': 'R&D',
    'value': 104
  },
  {
    'id': '2.5',
    'parent': '1.1',
    'name': 'AE',
    'value': 90
  },
  {
    'id': '2.3',
    'parent': '1.1',
    'name': 'Engineering Learning Center ',
    'value': 51
  },
  {
    'id': '2.2',
    'parent': '1.1',
    'name': 'Human Resources',
    'value': 51
  },
  {
    'id': '2.4',
    'parent': '1.1',
    'name': 'Accessories',
    'value': 43
  },
  {
    'id': '2.9',
    'parent': '1.2',
    'name': 'Accounts and Finance',
    'value': 30
  },
  {
    'id': '2.8',
    'parent': '1.2',
    'name': 'FO',
    'value': 56
  },
  {
    'id': '2.7',
    'parent': '1.2',
    'name': 'CD',
    'value': 129
  },
  {
    'id': '2.6',
    'parent': '1.2',
    'name': 'CA',
    'value': 109
  }
];

// Splice in transparent for the center circle
Highcharts.getOptions().colors.splice(0, 0, 'transparent');


Highcharts.chart('container', {

  chart: {
    height: '100%'
  },

  title: {
    text: 'Demo'
  },
  subtitle: {
    text: 'How to pass your data to sunburst chart'
  },
  series: [{
    type: "sunburst",
    data: data,
    allowDrillToNode: true,
    cursor: 'pointer',
    dataLabels: {
      format: '{point.name}',
      filter: {
        property: 'innerArcLength',
        operator: '>',
        value: 16
      }
    },
    levels: [{
        level: 1,
        levelIsConstant: false,
        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
        }
      }
    ]

  }],
  tooltip: {
    headerFormat: "",
    pointFormat: 'The value of <b>{point.name}</b> is <b>{point.value}</b>'
  }
});

#container {
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto
}

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

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