gpt4 book ai didi

javascript - 在 Highcharts 中分割显示图例

转载 作者:行者123 更新时间:2023-12-01 02:40:03 25 4
gpt4 key购买 nike

我有带有 Highcharts 的组合图,有样条图、饼图和堆积图。是否可以拆分图例或同时使用垂直和水平布局?

当前布局图例是水平的

*系列1 *系列2 *系列3 *系列4 *系列5 *系列6 *系列7 *系列8

我希望图例显示为

*系列 1 *系列 2
*系列 3 *系列 4 *系列 5
*系列 6 *系列 7 *系列 8

这可能吗?

谢谢

最佳答案

仅使用 Highcharts 构造函数选项无法完成此操作。您可以通过包装一些核心功能来实现这种外观和行为:

(function(H) {
var merge = H.merge;

H.wrap(H.Legend.prototype, 'getAllItems', function() {
var allItems = [],
chart = this.chart,
options = this.options,
legendID = options.legendID;

H.each(chart.series, function(series) {
if (series) {
var seriesOptions = series.options;

// use points or series for the legend item depending on legendType
if (!isNaN(legendID) && (seriesOptions.legendID === legendID)) {
allItems = allItems.concat(
series.legendItems ||
(seriesOptions.legendType === 'point' ?
series.data :
series)
);
}
}
});

return allItems;
});

H.wrap(H.Chart.prototype, 'render', function(p) {
var chart = this,
chartOptions = chart.options;

chart.firstLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.firstLegend, {
legendID: 0
}));

chart.secondLegend = new H.Legend(chart, merge(chartOptions.legend, chartOptions.secondLegend, {
legendID: 1
}));

p.call(this);
});

H.wrap(H.Chart.prototype, 'redraw', function(p, r, a) {
var chart = this;

p.call(chart, r, a);

chart.firstLegend.render();
chart.secondLegend.render();
});

H.wrap(H.Legend.prototype, 'positionItem', function(p, item) {
p.call(this, item);
});
})(Highcharts);

Highcharts 选项:

Highcharts.chart('container', {

chart: {
marginRight: 350 // create some space for the legend
},

legend: {
verticalAlign: 'middle',
width: 300,
align: 'right'
},
firstLegend: {
y: -25
},
secondLegend: {
y: 25
},

series: [{
data: [5, 6, 7],
legendID: 0,
}, {
data: [2, 3, 1],
legendID: 0,
},
(...)
{
data: [1, 8, 2],
legendID: 1
}, {
data: [3, 2],
legendID: 1
},
(...)
]
});

现场演示: http://jsfiddle.net/kkulig/r70fwasr/

可以优化此代码,使其适用于 2 个以上的图例。

关于javascript - 在 Highcharts 中分割显示图例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47624458/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com