1

我正在努力实现这一目标：

我有一个包含 4 个系列的堆叠柱形图，我希望用户能够单击堆叠列（不是单个列，整个堆叠列）来选择这些点并更改宽度、颜色、添加 dataLabels仅选定的堆叠列。这需要显示有关所选堆叠列的更多详细信息。

该系列看起来像这样：

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'
}]

jsfiddle： http: //jsfiddle.net/XFDdz/6/（感谢Dmonix！）

有没有办法做到这一点？如果有怎么办？

编辑：从我在这里看到的，我想要的部分是可行的（堆叠列的宽度不同）：http ://www.fusioncharts.com/demos/gallery/#marimekko-charts和http://highcharts。 uservoice.com/forums/55896-general/suggestions/2303560-multi-dimensional-column-charts

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

编辑 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 元素来设置宽度，但这是一个非常糟糕的 hack，我真的希望通过 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)
4

1 回答 1

0

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

唯一（可接受的）缺点是该列与前一列和下一列重叠。

由于无法通过 Highcharts API 做到这一点，我接受这个答案。

于 2013-09-06T13:28:27.077 回答