Manuell aktivieren Drilldown in Highcharts Diagramm durch Klicken auf ein anderes Diagramm

Question

Ich verwende Highcharts, um zwei Diagramme in eckigen zeichnen (aber ich don t; t denke, dass das wichtig ist oder dieses Problem) - Tortendiagramm und Balkendiagramm. Ich habe zwei Diagramme definiert, und ich möchte Drilldown in Balkendiagramm auslösen, wenn ich auf Kreisdiagramm klicke. Außerdem sollte ein Drilldown für dieselben Daten durchgeführt werden. Dies sind Diagrammeinstellungen:

import Highcharts from 'highcharts/highstock'; 

export const MEDIA_CHART = { 
chart: { 
    height: 350, 
    type: 'pie', 
    width: 300 
}, 
drilldown: { 
allowPointDrilldown: true 
}, 
legend: { 
borderWidth: 0, 
enabled: true, 
symbolRadius: 0, 
title: { 
    text: '' 
}, 
useHTML: true, 
/*eslint-disable*/ 
labelFormatter: function() { 
    return '<div style="max-width:150px;"><span style="width:100%;display:block;text-align:center;">' + this.name + '</span><span>' + Highcharts.numberFormat(this.y, 2, ',', '.') + '€</span></div>'; 
} 
/*eslint-enable*/ 
}, 
plotOptions: { 
pie: { 
    center: ['48%', '42%'], 
    showInLegend: true 
}, 
series: { 
    allowPointSelect: true, 
    cursor: 'pointer', 
    /*eslint-disable*/ 
    events: { 
    click: function (event) { 
     console.log(TACTIC_CHART.chart.drilldownLevels.length); 
    } 
    }, 
    /*eslint-enable*/ 
    dataLabels: { 
    enabled: true, 
    format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
    } 
} 
}, 
series: [{ 
size: '95%', 
innerSize: '60%' 

}], 
tooltip: { 
borderWidth: 0, 
backgroundColor: '#37474F', 
headerFormat: '', 
pointFormat: '{point.name}: {point.y:,.2f}€', 
style: { 
    color: '#fff', 
    padding: 0, 
    fontWeight: 700 
}, 
useHTML: true 
} 
}; 

export const TACTIC_CHART = { 
chart: { 
type: 'bar', 
height: '100%' 
}, 
colors: ['#969696', '#F1292E', '#A0CB0E'], 
drilldown: { 
    allowPointDrilldown: true 
}, 
xAxis: { 
title: { 
    text: null 
}, 
type: 'category' 
}, 
yAxis: { 
min: 0, 
title: { 
    text: 'Budget €', 
    align: 'high' 
}, 
labels: { 
    overflow: 'justify' 
} 
}, 
tooltip: { 
    enabled: true, 
    borderWidth: 0, 
    backgroundColor: '#37474F', 
    headerFormat: '', 
    pointFormat: '{series.name}: {point.y:,.2f}€', 
    style: { 
    color: '#fff', 
    padding: 0, 
    fontWeight: 700 
}, 
    useHTML: true, 
    valueSuffix: ' €' 
}, 
title: { 
align: 'left' 
}, 
plotOptions: { 
bar: { 
    dataLabels: { 
    enabled: true, 
    /*eslint-disable*/ 
    formatter: function() { 
     return Highcharts.numberFormat(this.y, 2, ',', '.') + '€'; 
    } 
    /*eslint-enable*/ 
    } 
} 
}, 
legend: { 
    enabled: true, 
    layout: 'horizontal', 
    align: 'center', 
    verticalAlign: 'top', 
    floating: true, 
    borderWidth: 1, 
    backgroundColor: '#FFFFFF', 
    shadow: true 
} 
}; 

In diesem Teil klicken Sie auf Ich fange Kreisdiagramm:

events: { 
    click: function (event) { 
     console.log(TACTIC_CHART.chart.drilldownLevels.length); 
    } 
    }, 

ich versucht, dies zu bekommen, aber ich bekomme Fehler can't get length of undefined. Ich habe jede mögliche Lösung ausprobiert, die ich gefunden habe, aber ohne Glück. Problem ist, dass ich Daten für Balkendiagramm beibehalten muss, also kann ich es nicht neu zeichnen, ich muss Drilldown aktivieren, wenn es möglich ist. Danke allen für die Hilfe!

Answer 1

Sie können die interne Funktion Point.doDrilldown() an einem bestimmten Punkt eines anderen Diagramms in drilldown Ereignis und Chart.drillUp() auf drillup Ereignis aufrufen. Denken Sie auch daran, eine Flagvariable zu erstellen, um eine Endlosschleife zu verhindern. Sehen Sie sich das folgende Beispiel an, das ich für Sie vorbereitet habe. Im Falle einer Frage, zögern Sie nicht zu fragen.

API-Referenz:
http://api.highcharts.com/highcharts/chart.events.drilldown
http://api.highcharts.com/highcharts/chart.events.drillup

Beispiel:
http://jsfiddle.net/048kne3c/