Highchart：旭日图不显示

Question

我正在尝试使用 Highchart 生成森伯斯特图表。 作为参考，我使用来自 Highchart 站点的相同演示

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

这是我的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>

Answer 2

它没有正确指向图表容器

 let chartData = [{ '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 } ]; Highcharts.getOptions().colors.splice(0, 0, 'transparent'); Highcharts.chart('container', { chart: { height: '100%' }, title: { text: 'Asset Distribution' }, series: [{ type: 'sunburst', data: chartData, 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: 'Asset Stock of <b>{point.name}</b> is <b>{point.value}</b>' } });

 <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>