javascript - 使用 colorByPoint 时如何设置系列的图例符号颜色?

标签 javascript charts highcharts

我有一个包含两个系列(今年和去年)的柱形图,我想在其中设置某些列“组”的颜色来代表季节,如下所示:

enter image description here

为此,我为每个系列设置了颜色,并使用了colorByPoint 选项。请参阅this fiddle .

请注意,图表图例对两个系列的符号使用相同的灰色。 (我什至不确定灰色从何而来 - 它不是来自两个系列中颜色“调色板”的颜色)。

如何为每个系列设置图例符号颜色?(理想情况下,我想为“今年”系列使用深灰色,以反射(reflect)颜色是该系列中的所有点都较暗)。

注意:虽然还有其他方法可以设置每个数据点的颜色,例如使用对象数组作为包含颜色设置的 data 参数,但我不这样做想要这样做,因为在我的现实示例中,数据通过 data 模块来自 CSV 文件 - 所以我无法以这种方式使用对象。

最佳答案

基于this previous answer我更新了代码以支持最新版本。

如果包装 Legend 类的 colorizeItem 函数,则可以使用 legendColor 属性:

(function(H) {
    H.wrap(H.Legend.prototype, 'colorizeItem', function(proceed, item, visible) {
        var color = item.color;
        item.color = item.options.legendColor;
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        item.color = color;
    });
}(Highcharts));

你仍然应用legendColor:

$('#container').highcharts({
    series: [{
        legendColor: 'black',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

参见this updated JSFiddle demonstration正在使用中。

关于javascript - 使用 colorByPoint 时如何设置系列的图例符号颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52605004/

相关文章:

javascript - 为什么匿名函数在 Javascript 中对我不起作用?

c# - MVC System.Web.Helpers 圆环图标签定位

C# .NET 图表 - 添加图例滚动条和复选框

angular - Gauge highcharts 无法使用 ionic 2 调整大小

javascript - Highcharts 的 x 轴(日期时间)格式

JavaScript (JQuery/Ajax) 计时器自行停止

javascript - 从 JS/Jquery 关闭全屏 Flash

javascript - 带有 Async/Await 的 TypeScript 和 Promise 包装器。我如何绑定(bind)遗留代码?

python - 如何使用 Python 和 Openpyxl 向我的 Excel 折线图添加高级样式

javascript - 如何重置drillUpButton 单击时的大小