如何在highchart中的單擊事件上更改所選堆棧欄的整個顏色

Question

我在 HighChart 的幫助下同時使用了堆棧欄和折線圖的組合，我希望能夠選擇一個欄（或者在我的情況下是整個堆棧欄以及折線圖中的點）並更改當我點擊它時它的顏色，

現在我可以選擇一個條形圖並更改其顏色，但無法更改兩個條形圖的顏色和單擊的線的點

下面是我從最后嘗試的代碼的點擊，我希望能夠在點擊時選擇整個條和線，但我只能選擇其中一個

沙盒鏈接

Answer 1

我試過這個很抱歉沙盒鏈接被破壞了

 Highcharts.chart('container', { "chart": { "zoomType": "xy", "height": 320 }, "credits": { "enabled": false }, "title": { "text": "", "align": "left", "style": { "fontFamily": "Poppins, Helvetica, \"sans-serif\"", "fontWeight": "600" } }, "xAxis": { "title": { "text": "" }, "categories": [ "0.01-0.05", "0.06-0.10", "0.11-0.15", "0.16-0.20", "0.21-0.25", "0.26-0.30", "0.31-0.35", "0.36-0.40", "0.41-0.45", "0.46-0.50", "0.51-0.55", "0.56-0.60", "0.61-0.65", "0.66-0.70", "0.71-0.75", "0.76-0.80", "0.81-0.85", "0.86-0.90", "0.91-0.95", "0.96-1.00" ], "crosshair": true, "plotLines": [{ "color": "#A9A9A9", "width": 3, "value": 9.5, "dashStyle": "longdashdot" }] }, "yAxis": [{ "title": { "text": "Count" }, "min": 0 }, { "title": { "text": "y1 count" }, "opposite": true, "min": 0 } ], "tooltip": { "shared": true }, plotOptions: { series: { stacking: 'normal', point: { events: { click() { var indexP = this.x, series = this.series.chart.series; if (series[0].data[indexP].selected) { //unselect series[0].data[indexP].select(false, true); series[1].data[indexP].select(false, true); } else { var i = 0; var len = series[1].data.length; for (i = 0; i < len; i++) { //clear all selection series[0].data[i].select(false, true); series[1].data[i].select(false, true); series[2].data[i].select(false, true); } //select series[0].data[indexP].select(true, true); series[1].data[indexP].select(true, true); series[2].data[indexP].select(true, true); } return false; } } } } }, "legend": { "layout": "horizontal", "align": "right", "verticalAlign": "top" }, "exporting": { "enabled": false }, "series": [{ "name": "y1", "type": "column", "stack": 1, "yAxis": 1, "color": "rgb(217, 141, 39)", "data": [ 1, 13, 24, 25, 34, 74, 104, 66, 104, 121, 111, 89, 87, 97, 93, 92, 100, 147, 250, 567 ], "tooltip": { "valueSuffix": " " } }, { "name": "y3", "type": "column", "stack": 1, "yAxis": 1, "color": "rgb(44, 99, 143)", "data": [ 463, 287, 208, 201, 209, 197, 171, 150, 134, 102, 65, 50, 36, 24, 33, 20, 13, 13, 10, 9 ], "tooltip": { "valueSuffix": "" } }, { "name": "y3", "type": "line", "color": "#F1416C", "data": [ 1, 14, 38, 63, 97, 171, 275, 341, 445, 566, 677, 766, 853, 950, 1043, 1135, 1235, 1382, 1632, 2199 ], "tooltip": { "valueSuffix": " " } } ] })

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <div id="container"></div>