Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/oracle/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery 如何为给定的叠层柱设置自定义样式?_Jquery_Highcharts - Fatal编程技术网

Jquery 如何为给定的叠层柱设置自定义样式?

Jquery 如何为给定的叠层柱设置自定义样式?,jquery,highcharts,Jquery,Highcharts,我正在努力做到这一点: 我有一个包含4个系列的堆叠柱形图,我希望用户能够单击堆叠柱而不是单个柱,整个堆叠柱以选择这些点,并更改宽度、颜色,仅添加选定堆叠柱的数据标签。这是显示选定叠层柱的更详细信息所必需的 该系列如下所示: series: [{ name: 'd', data: [120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 12000

我正在努力做到这一点:

我有一个包含4个系列的堆叠柱形图,我希望用户能够单击堆叠柱而不是单个柱,整个堆叠柱以选择这些点,并更改宽度、颜色,仅添加选定堆叠柱的数据标签。这是显示选定叠层柱的更详细信息所必需的

该系列如下所示:

series: [{
    name: 'd',
    data: [120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000],
    color: '#ffffff'
}, {
    name: 'c',
    data: [40000, 67000, 94000, 121000, 148000, 175000, 202000, 229000, 256000, 283000, 310000, 337000, 364000, 391000, 418000],
    color: '#bde0db'
}, {
    name: 'b',
    data: [75000, 73000, 71000, 69000, 67000, 65000, 63000, 61000, 59000, 57000, 55000, 53000, 51000, 49000, 47000],
    color: '#a7dcf0'
}, {
    name: 'a',
    data: [450000, 425000, 400000, 375000, 350000, 325000, 300000, 275000, 250000, 225000, 200000, 175000, 150000, 125000, 100000],
    color: '#8dbad2'
}]
感谢Dmonix的帮助

有没有办法做到这一点?如果是,怎么做

编辑:从我在这里看到的,我想要的部分是可以在堆叠的列上实现不同的宽度:和

如果有人能为我指出宽度问题的正确方向,并为选定的堆叠柱点重新设计样式和添加数据标签,我将不胜感激

编辑2:我知道了如何设置给定点的颜色,还需要知道如何设置宽度。以下列出的系列解决方案:

series: [{
    name: 'd',
    data: [120000, 120000, 120000, {name: 'point 1',color: '#df4a92',y:120000,pointWidth:100}, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000, 120000],
    color: '#ffffff'
}, {
    name: 'c',
    data: [40000, 67000, 94000, {name: 'point 1',color: '#81c6bd',y:121000,pointWidth:100}, 148000, 175000, 202000, 229000, 256000, 283000, 310000, 337000, 364000, 391000, 418000],
    color: '#bde0db'
}, {
    name: 'b',
    data: [75000, 73000, 71000, {name: 'point 1',color: '#58c3eb',y:69000,pointWidth:100}, 67000, 65000, 63000, 61000, 59000, 57000, 55000, 53000, 51000, 49000, 47000],
    color: '#a7dcf0'
}, {
    name: 'a',
    data: [450000, 425000, 400000, {name: 'point 1',color: '#2e87b7',y:375000,pointWidth:100}, 350000, 325000, 300000, 275000, 250000, 225000, 200000, 175000, 150000, 125000, 100000],
    color: '#8dbad2'
}]
忽略数据集中的pointWidth,它不起任何作用

编辑3:我可以通过直接操作SVG元素来设置宽度,但这是一个很糟糕的技巧,我真的希望通过API解决它,并且此方法不会调整/放置其余列:

$(".highcharts-series.highcharts-tracker rect[fill='#2e87b7']").attr('width',175)
$(".highcharts-series.highcharts-tracker rect[fill='#58c3eb']").attr('width',175)
$(".highcharts-series.highcharts-tracker rect[fill='#81c6bd']").attr('width',175)
$(".highcharts-series.highcharts-tracker rect[fill='#df4a92']").attr('width',175)

最终的解决方案是使用Highcharts.renderer创建与列高度和位置匹配的新SVG元素,然后在实际图形上重新定位新元素。然后,我根据新元素中的数据rel标记和数据标签中的匹配css类名重新定位数据标签

唯一可接受的缺点是列与上一列和下一列重叠

由于无法通过Highcharts API实现这一点,我接受这个答案。

修复了fiddle