手動激活在Highcharts圖表中通過單擊另一個圖表鑽取

我正在使用highcharts在角度中繪製兩個圖表（但我不認爲這很重要或者存在此問題） - 餅圖和條形圖。我定義了兩個圖表，當我點擊餅圖時，我想觸發條形圖下鑽。另外，應該爲相同的數據執行向下鑽取。這些圖表設置：手動激活在Highcharts圖表中通過單擊另一個圖表鑽取

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 
} 
};

在這一部分，我趕上點擊餅圖：

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

我試圖讓這個，但我得到的錯誤can't get length of undefined。我嘗試了所有可能的解決方案，但沒有任何運氣。問題是我需要爲條形圖保留數據，所以我無法重新繪製它，如果可能的話，我需要激活向下鑽取。感謝大家的幫助！

來源

2017-08-28 MrCkobe

您可以在drilldown事件中的另一個圖表的特定點上調用內部函數Point.doDrilldown()，並在drillup事件上調用Chart.drillUp()上的內部函數。另外，請記住創建一些標誌變量來防止無限循環。看看我爲你準備的下面的例子。如有任何問題，請隨時詢問。

API參考：
http://api.highcharts.com/highcharts/chart.events.drilldown
http://api.highcharts.com/highcharts/chart.events.drillup

例子：
http://jsfiddle.net/048kne3c/

來源

2017-09-04 14:39:12

嗨@d_paul，這正是我找了！在接下來的幾天裏，讓我試試它，因爲我轉向了另一項緊急任務，並且儘快測試完成，如果一切正常，我會接受您的答案。對不起，延遲，但這是工作:) – MrCkobe

沒問題，很高興它有幫助（或至少看起來有用:)）。 –

嗨@d_paul我設法幾乎使它工作。我得到'不能在drillUp上讀取'undefined'屬性'levelNumber'。你知道那可能是什麼嗎？感謝所有幫助！ :) – MrCkobe

手動激活在Highcharts圖表中通過單擊另一個圖表鑽取

回答

相關問題