0
チャートを別のコンテナにドリルダウンしたいとします。チャートに3〜4レベルのドリルダウンがあり、それらをすべて別のコンテナに表示したいと考えています。 私は私のコードで重複せずに、それがrenderToメソッドまたは再描画メソッドを使用して複数のコンテナに円グラフのハイチャートをドリルダウンする方法はありますか？
` どうすれ例
</head>
<body>
<div id="container0" style="min-width: 900px; height: 500px; margin: 0 "></div>
<div id="container1" style="min-width: 900px; height: 300px; margin: 0 "></div>
<div id="container2" style="min-width: 900px; height: 100px; margin: 0 "></div>
<script>
var chartType;
function getTitle()
{
var e = document.getElementById("getTitleId");
chartType = e.options[e.selectedIndex].value;
return chartType;
}
var defaultTitle = "Sales Summary [Quarterly]";
var drilldownTitle = " Sales";
var chart = Highcharts.chart({
chart: {
renderTo: 'container0',
type: 'pie',
marginLeft:120,
options3d: {
enabled: true,
alpha: 45,
beta: 0
},
events: {
drilldown: function(e) {
chart.setTitle({ text: e.point.name + drilldownTitle });
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle });
}
}
},
title: {
text:defaultTitle
},
credits : {
enabled : false
},
events:{
drilldown: function(e)
{
chart.setTitle({text: e.point.name}, {text: ''});
},
drillup: function(e){
if(e.seriesOptions.name == topLevelSeriesName) {
chart.setTitle({text: topLevelTitle}, {text: topLevelSubtitle});
}
else {
chart.setTitle({text: e.seriesOptions.name}, {text: ''});
}
}
},
xAxis: {
type: 'category'
},
tooltip: {
pointFormat: `{point.tooltips}<br>Sales:{point.y}</b>`
},
plotOptions: {
showInLegend: true,
pie: {allowPointSelect: true,
depth: 35,},
series: {
borderWidth: 50,
dataLabels: {
enabled: true,
}
}
},
series: [{
type:'pie',
name: 'Quarterly',
colorByPoint: true,
data: [
{
name: 'QUARTER 1',
y:3061997,
drilldown: 'quarter1'
},
{
name: 'QUARTER 2',
y:56608868,
drilldown: 'quarter2'
}
]
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},},
series: [
{
id: 'quarter1',
name: 'MONTHLY',
data: [
{
name:'FEBRUARY',
y:139353,
drilldown: 'february'
},
{
name:'MARCH',
y:2922643,
drilldown: 'march'
}
]
},
{
type:'pie',
id: 'quarter2',
name: 'MONTHLY',
data: [
{
name: 'APRIL',
y:21781659,
drilldown: 'april'
},
{
name:'MAY',
y:19387600,
drilldown: 'may'
},
{
name:'JUNE',
y:15439608,
drilldown: 'june'
}
]
}
]
}
});
</script>
</body>
HighChartドリルダウンをcomplex.`することなく、最も簡単な方法でそれを行うことができますどのようにドリルダウンの各クリックイベントでこのチャートを別のコンテナにドリルダウンしますか？
は、ここでは、この目的のためにjsfiddle
あなたが別のコンテナにドリルダウンとはどういう意味ですか？クリックが発生したコンテナはどうなりますか？ 1つのチャートでドリルダウンアクションを実行しようとしていますか？別のチャートのフィルタを適用しますか？ – ewolden
元のconatinerに何も起こらない。 ドリルダウンが新しいコンテナにロードされるソースのように機能します。 – Lalit