Highcharts树形图导出

时间:2015-04-24 11:15:23

标签: highcharts

我在导出Highcharts Treemap时遇到了困难。如果我钻进叶子,它仍然导出上层的图像。

数据结构如下:

  • __ level 1 - 供应商
  • _________ 2级 - 化学品
  • ______________ 3级 - 叶子

代码:

$(function () {

    var data = [
        {"name":"Supplier A","id":"0","color":"#058DC7"},
        {"name":"Chemical A","id":"0_0","parent":"0"},
        {"name":"leaf","id":"0_0_0","value":222,"parent":"0_0"},
        {"name":"Chemical B","id":"0_1","parent":"0"},
        {"name":"leaf","id":"0_1_0","value":10,"parent":"0_1"},
        {"name":"Supplier B","id":"1","color":"#50B432"},
        {"name":"Chemical C","id":"1_0","parent":"1"},
        {"name":"leaf","id":"1_0_0","value":555,"parent":"1_0"},
        {"name":"Chemical D","id":"0_2","parent":"0"},
        {"name":"leaf","id":"0_2_0","value":777,"parent":"0_2"},
        {"name":"Chemical E","id":"0_3","parent":"0"},
        {"name":"leaf","id":"0_3_0","value":888,"parent":"0_3"},
        {"name":"Supplier C","id":"2","color":"#ED561B"},
        {"name":"Chemical F","id":"2_0","parent":"2"},
        {"name":"leaf","id":"2_0_0","value":1000,"parent":"2_0"}];


    var chart = new Highcharts.Chart({  
            chart: {
                renderTo: 'container'
            },
            series: [{
                type: "treemap",
                layoutAlgorithm: 'squarified',
                allowDrillToNode: true,
                dataLabels: {
                    enabled: false
               },
               levelIsConstant: false,
               levels: [{
                   level: 1,
                   dataLabels: {
                        enabled: true
                   },
                   borderWidth: 3
               }],
               data: data
           }],
           subtitle: {
               text: 'Click points to drill down'
           },
           title: {
                text: 'Treemap Chart'
           }
    });

});

非常感谢任何帮助!

jsfiddle的例子: http://jsfiddle.net/s1vzj9hu/1/

环境:Linux /谷歌Chrome / Firefox,Windows / IE

二级(化学品)图片表格出口:

Web浏览器/监视器中的预期图片

0 个答案:

没有答案