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>

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>

高图：不显示森伯斯特图表

2 个答案: