[英]Highchart : sunburst chart not displaying
I am trying to generate sunburst chart using Highchart.我正在尝试使用 Highchart 生成森伯斯特图表。 For reference i use the demo for the same from Highchart site
作为参考,我使用来自 Highchart 站点的相同演示
I modified the data according to my requirement but i guess i miss something because of that it's not working.我根据我的要求修改了数据,但我想我错过了一些东西,因为它不起作用。
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
}
]
This is my data which i want to show on chart这是我想在图表上显示的数据
I can anybody please help me on this.我可以请任何人帮助我。
You were not passing data
correctly to container due to which it was not rendering.您没有将
data
正确传递到容器,因为它没有呈现。
Pass your data
to var data
like below instead of directly adding your data ie array of objects into chart dataset object:将您的
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}];
Below is working JSFIDDLE :下面是工作JSFIDDLE :
Working snippet below :下面的工作片段:
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>
It is not correctly pointing the chart container它没有正确指向图表容器
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.