2017-08-28 87 views
1

我正在使用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。我嘗試了所有可能的解決方案,但沒有任何運氣。問題是我需要爲條形圖保留數據,所以我無法重新繪製它,如果可能的話,我需要激活向下鑽取。感謝大家的幫助!

回答

0

您可以在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/

+0

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

+0

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

+0

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

相關問題