首页 文章

如何使用高级图表中每个级别的不同图表向下钻取到3级?

提问于
浏览
3

我正在尝试使用HighCharts在每个级别上使用不同的图表 .

例如 -

  • Level-1包含条形图 .

  • Level-2包含饼图 .

  • Level-3包含表格表示 .

以下是我的代码片段:

// Create the chart
$('#container').highcharts({
    chart: {
        type: 'pie'  // Mentioned only pie.Need different graph on individual level.
    },
    title: {
        text: 'Basic drilldown'
    },
    xAxis: {
        type: 'category'
    },
    plotOptions: {
        series: {
            borderWidth: 1,
            dataLabels: {
                enabled: true,
            }
        }
    },
    series: [{
        id: 'toplevel',
        name: 'Animals',
        data: [
            {name: 'Cats', y: 4, drilldown: 'level1'}, //Level-1
            {name: 'Dogs', y: 2},
            {name: 'Cows', y: 1},
            {name: 'Sheep',y: 2},
            {name: 'Pigs', y: 1}
        ]
    }],
    drilldown: {
        series: [ { 
            id:'level1',
            name: 'Level 1',
            data: [
                {name: 'Trees', y: 1},
                {name: 'Plants', y: 2},
                {name: 'Grass', y: 3},
                {name: 'Deeper Level-2', y: 4, drilldown: 'level2'} //Level-2
            ] 
        },{                
            id:'level2',
            name: 'Level 2',
            data: [
                {name: 'Green', y:1},
                {name: 'Red', y:2},
                {name: 'Blue', y:3},
                {name: 'Deeper Level-3', y: 4, drilldown: 'level3'} //Level-3
            ] 
        },{
            id: 'level3',
            name: 'Level 3',
            data: [
                {name:'Violet', y:1},
                {name:'Red',y:2},
                {name:'Yellow', y:3}
            ]
        }]
    }
})

我期待这一点,同时点击每个级别;数据将在每个级别上以不同的图表出现 .

上面的代码在切片点击上给出了相同图表类型的数据,这应该是不同的图表类型 .

2 回答

  • 0

    要更改每个单独的级别图表类型,您应该使用 series.type ,如下所示:

    drilldown: {
        series: [ { 
            id:'level1',
            name: 'Level 1',
            type: 'bar',
           //^^^^^^^^^^^
            data: [
                {name: 'Trees', y: 1},
                {name: 'Plants', y: 2},
                {name: 'Grass', y: 3},
                {name: 'Deeper Level-2', y: 4, drilldown: 'level2'} //Level-2
            ] 
        },{                
            id:'level2',
            name: 'Level 2',
            type: 'pie',
          //^^^^^^^^^^^^
            ...
        }]
    }
    

    既然你想在最后一级钻取到表,而highcharts不支持这样的东西你应该创建一个自定义钻取到表:

    • 定义一种方法,用于在图表钻取到级别3时创建自定义表格
    var createTable = function(data) {
      $("#container").hide();
      // remove the existing table
      $('#here_table .table').remove();
    
      // create a table object
      var table = $('<div class="table"><a href="#" class="back" onclick="tableBack()">back</a><table></table></div>').addClass('chart-table');
    
      // iterate the series object, create rows and columnts
      $.each(data, function( index, value ) {
        var row = $('<tr></tr>').addClass('chart-row');
        var col1 = $('<td></td>').text(value.name).appendTo(row);
        var col2 = $('<td></td>').text(value.y).appendTo(row);
    
        // mark the row of the clicked sector
    
        table.append(row);
      });
    }
    
    • level-2 点添加点击事件处理程序,调用 createTable 方法并将level-3数据传递给 createTable
    {                
        id:'level2',
        name: 'Level 2',
        type: 'pie',
        point: {
                events: {
                    click: function () {
                        console.log(this);
                        if(this.name == "Deeper Level-3"){
                           var data = [
                             {name:'Violet', y:1},
                             {name:'Red',y:2},
                             {name:'Yellow', y:3}
                           ];
                           createTable(data);
                        }
    
                    }
                }
            },
        data: [
            {name: 'Green', y:1},
            {name: 'Red', y:2},
            {name: 'Blue', y:3},
            {name: 'Deeper Level-3', y: 4} //Level-3
        ] 
    }
    
    • 并最后为表返回一个事件处理程序以返回到原来的位置:
    tableBack = function(){
       $("#container").show();
       // remove the existing table
       $('#here_table .table').remove();
    }
    

    Working Fiddle of what I have done

    希望有所帮助

  • 2

    您只需要设置数据系列的类型 . 看jsfiddle

    series: [{
                name: 'IE distribution',
                id: 'IE distribution',
                type: 'bar',
                data: [
                    ['asia', 24.13],
                    ['europe', 17.2],
                    ['africa', 8.11]
                ]
            }
    

相关问题