Highcharts-在单个值上显示标记图标

Highcharts - Display Marker Icon on Single Value

本文关键字：图标 显示 单个值 Highcharts-      更新时间：2023-09-26

想要在Highcharts图上创建单个标记，预期结果应该是这样的-http://jsfiddle.net/m1mqv4z2/

{
            x: Date.UTC(2014, 6, 31)
            y: 26.5,
            marker: {
                symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
            }
        },

我正在寻找上面的图标显示在这个图表上-http://jsfiddle.net/wkaLs9ub/3/.因此，出于示例的目的，我想将太阳图标设置为该图表的中间值。

我尝试过的方法如上面的片段所示，这段代码嵌套在数据中，就像第一小提琴中显示的那样，但我没有成功。这在Highcharts的功能中可能吗？

正如您所指出的，您需要为您的点设置marker.symbol。在你的数据中，它看起来像这样： 
data: [
    [Date.UTC(2014, 6, 31), 0.8446],
    { x: Date.UTC(2014, 8, 18), y: 0.736, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' } },
    [Date.UTC(2014, 7, 01), 0.8283],
    // ...
]

详细信息图表的数据取决于这段代码，它填充了detailData数组：

$.each(masterChart.series[0].data, function () {
    if (this.x >= detailStart) {
        detailData.push([this.x, this.y]);
    }
});

在这里，您还需要转移marker.symbol的详细信息。您还需要包括enabled: true，因为图表已将其作为一个整体禁用。你可以更新这段代码，例如：

$.each(masterChart.series[0].data, function () {
    if (this.x >= detailStart) {
        // If it has a symbol, include that information
        if(this.marker && this.marker.symbol) 
            detailData.push({x: this.x, y: this.y, marker: { enabled: true, symbol: this.marker.symbol }});
        // Else, just include x and y
        else
            detailData.push([this.x, this.y]);
    }
});

请参阅此更新的JSFiddle，了解其工作原理。

相关文章：