如何在Highchart中進行堆積柱線圖鑽取

我是使用Highchart的新手。我可以創建一個堆疊的折線圖。現在我想創建它的深入。我能夠獲得點擊事件，並從相同的位置創建一個新的圖表，但使用該圖表我無法回到以前的圖表。所以我需要使用它的鑽取屬性。這是我的圖表代碼。的HTML本部如何在Highchart中進行堆積柱線圖鑽取

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<script src="https://code.highcharts.com/modules/drilldown.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> 
</div>

現在腳本部分

Highcharts.chart('container', { 
chart: { 
    zoomType: 'xy' 
}, 
title: { 
    text: 'Average Monthly Temperature and Rainfall in Tokyo' 
}, 
subtitle: { 
    text: 'Source: WorldClimate.com' 
}, 
xAxis: [{ 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
    crosshair: true 
}], 
yAxis: [{ // Primary yAxis 
    labels: { 
     format: '{value}°C', 
     style: { 
      color: Highcharts.getOptions().colors[1] 
     } 
    }, 
    title: { 
     text: 'Temperature', 
     style: { 
      color: Highcharts.getOptions().colors[1] 
     } 
    } 
}, { // Secondary yAxis 
    title: { 
     text: 'Rainfall', 
     style: { 
      color: Highcharts.getOptions().colors[0] 
     } 
    }, 
    labels: { 
     format: '{value} mm', 
     style: { 
      color: Highcharts.getOptions().colors[0] 
     } 
    }, 
    opposite: true 
}], 
tooltip: { 
    shared: true 
}, 
plotOptions: { 
    column: { 
     stacking: 'normal', 
     cursor: 'pointer' 
    } 
}, 
legend: { 
    layout: 'vertical', 
    align: 'left', 
    x: 120, 
    verticalAlign: 'top', 
    y: 100, 
    floating: true, 
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' 
}, 
series: [{ 
    name: 'Rainfall', 
    type: 'column', 
    yAxis: 1, 
    drilldown: true, 
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
    tooltip: { 
     valueSuffix: ' mm' 
    } 

},{ 
    name: 'Wind', 
    type: 'column', 
    yAxis: 1, 
    drilldown: true, 
    data: [25, 20, 30, 12, 14, 17, 13, 14, 21, 19, 25.6, 24.4], 
    tooltip: { 
     valueSuffix: ' mm' 
    } 

}, { 
    name: 'Temperature', 
    type: 'spline', 
    drilldown: true, 
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
    tooltip: { 
     valueSuffix: '°C' 
    } 
    }] 
});

來源

2017-04-21 Subho

我在這裏tryied：http://jsfiddle.net/Subhajyoti/dfzmb5w1/ – Subho

但我要點擊類別 – Subho

如果你想鑽到折線圖，只需設置輸入你options.series代替options.chart。

$(function() { 
 

 
    // Create the chart 
 
    $('#container').highcharts({ 
 
    title: { 
 
     text: 'Basic drilldown' 
 
    }, 
 
    xAxis: { 
 
     type: 'category' 
 
    }, 
 

 
    legend: { 
 
     enabled: true 
 
    }, 
 

 
    plotOptions: { 
 
     series: { 
 
     borderWidth: 0, 
 
     dataLabels: { 
 
      enabled: true, 
 
      style: { 
 
      color: 'white', 
 
      textShadow: '0 0 2px black, 0 0 2px black' 
 
      } 
 
     }, 
 
     stacking: 'normal' 
 
     } 
 
    }, 
 

 
    series: [{ 
 
    \t type: 'column', 
 
     name: 'Things', 
 
     data: [{ 
 
     name: 'Animals', 
 
     y: 5, 
 
     drilldown: 'animals' 
 
     }, { 
 
     name: 'Fruits', 
 
     y: 2, 
 
     drilldown: 'fruits' 
 
     }, { 
 
     name: 'Cars', 
 
     y: 4, 
 
     drilldown: 'cars' 
 
     }] 
 
    }, { 
 
    \t type: 'column', 
 
     name: 'Things2', 
 
     data: [{ 
 
     name: 'Animals', 
 
     y: 1, 
 
     drilldown: 'animals2' 
 
     }, { 
 
     name: 'Fruits', 
 
     y: 5, 
 
     drilldown: 'fruits2' 
 
     }, { 
 
     name: 'Cars', 
 
     y: 2, 
 
     drilldown: 'cars2' 
 
     }] 
 
    }], 
 
    drilldown: { 
 
     activeDataLabelStyle: { 
 
     color: 'white', 
 
     textShadow: '0 0 2px black, 0 0 2px black' 
 
     }, 
 
     series: [{ 
 
     id: 'animals', 
 
     name: 'Animals', 
 
     data: [ 
 
      ['Cats', 4], 
 
      ['Dogs', 2], 
 
      ['Cows', 1], 
 
      ['Sheep', 2], 
 
      ['Pigs', 1] 
 
     ] 
 
     }, { 
 
     id: 'fruits', 
 
     name: 'Fruits', 
 
     data: [ 
 
      ['Apples', 4], 
 
      ['Oranges', 2] 
 
     ] 
 
     }, { 
 
     id: 'cars', 
 
     name: 'Cars', 
 
     data: [ 
 
      ['Toyota', 4], 
 
      ['Opel', 2], 
 
      ['Volkswagen', 2] 
 
     ] 
 
     }, { 
 
     id: 'animals2', 
 
     name: 'Animals2', 
 
     data: [ 
 
      ['Cats', 3], 
 
      ['Dogs', 5], 
 
      ['Cows', 6], 
 
      ['Sheep', 2], 
 
      ['Pigs', 2] 
 
     ] 
 
     }, { 
 
     id: 'fruits2', 
 
     name: 'Fruits2', 
 
     data: [ 
 
      ['Apples', 1], 
 
      ['Oranges', 5] 
 
     ] 
 
     }, { 
 
     id: 'cars2', 
 
     name: 'Cars2', 
 
     data: [ 
 
      ['Toyota', 2], 
 
      ['Opel', 3], 
 
      ['Volkswagen', 2] 
 
     ] 
 
     }] 
 
    } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://github.highcharts.com/highcharts.js"></script> 
 
<script src="http://github.highcharts.com/modules/drilldown.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

活生生的例子：http://jsfiddle.net/wyos2saL/

來源

2017-04-21 11:36:20 stpoa

如何在Highchart中進行堆積柱線圖鑽取

回答

相關問題