Question

有没有办法在highcharts中的垂直线上添加自定义图标？我希望在特定日期（日粒度）添加这些点。似乎这最好作为一个系列执行;但是，我没有看到将附加数据附加到数据点的方法。我查看了渲染，绘制线条和绘图乐队的文档...似乎没有什么帮助。我甚至很难找到一个在日期添加垂直线的例子。

enter image description here

正如您在上面的屏幕截图中所看到的，烧杯和消息图标是在特定日期发生的事件。有没有人知道如何在highcharts中完成这样的事情？非常感谢您的帮助！

Answer 1

这可以做到。见demo。每点使用代码，如：

...
    {
      y: 26.5,
      marker: {
        symbol: 'url(<your image>)'
      }
    }
...

Answer 2

使用标记将分散图添加到系列：

系列之下：

        {
        type: 'scatter',
        showInLegend: false,
        data: [{}, {}, {}, {
            y: 200,
            marker: {
                symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
            }
        }, {
            y: 200,
            marker: {
                symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
            }
        }

裁剪不必要的部分：

    yAxis: {
        max: 200,

DEMO：http://jsfiddle.net/j8Y6g/1/

上一个答案（未正确调整大小）：

Highcharts API: Renderer.image

}, function(chart) { // on complete
    chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', 410, 40, 20, 20).add();
    chart.renderer.image('http://highcharts.com/demo/gfx/snow.png', 334, 40, 20, 20).add();
});

基本演示（未正确缩放）：http://jsfiddle.net/j8Y6g/

相关问题：
highchart: add images to top of chart on every column（我更喜欢这个）
Highcharts: Adding clickable image to every xAxis gridLine

其他问题：
Custom HighCharts - change the height of plotLines , show the marker value by default at a specific x and y

Answer 3

        marker: {
            symbol: 'square'
        },
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
            y: 26.5,
            marker: {
                symbol: 'url('your image path here')'
            }
        }, 23.3, 18.3, 13.9, 9.6]

HighCharts参考

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-symbols/

自定义系列图标

3 个答案: