Question

我打算使用散点系列在高图表图表的每个条形图上方添加标记（图像）。在jsFiddle的例子中，我想举例说，太阳要放在蓝色的柱子上面，云彩放在灰色的上面，而太阳则放在绿色的上面。当有一个系列（http://jsfiddle.net/yucca/tffevbrf/）时很简单，但是有几个我不能这样做。你能救我吗？

http://jsfiddle.net/yucca/2rt10hje/1/

$(function() {
$('#container').highcharts({
chart: {
  type: 'column'
},
xAxis: {
  categories: true
},

series: [{
    name: 'Serie1',
    data: [2.7,4.7]
    }, {
    name: 'serie2',
    data: [16.0,20.2]
    }, {
    name: 'serie3',
    data: [8.8,7.4]
      }, {
    type: 'scatter',
    data: [25,25],
    enableMouseTracking: false,
    showInLegend: false,
    marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }
    }, {
    type: 'scatter',
    data: [10,10],
    enableMouseTracking: false,
    showInLegend: false,
    marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)' }
    },{
    type: 'scatter',
    data: [5,5],
    enableMouseTracking: false,
    showInLegend: false,
    marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }
    }, 
  ],



});
});

Answer 1

你的小提琴不起作用，因为那里的系列定义不正确：

data: [
        //{ y: 30, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }},
        {
        data: [10,10],
        marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }
        }, {
        data: [10,10],
        marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }
        }, 
      ],

在那里你可以看到数据数组中的数据对象，API不支持的数据对象。但是，并非全部。

要达到预期的效果，您需要准确添加六个点（每个类别三个）。请记住，这些类别也是xAxis值，因此您可以将小数值指定为x值，就像这样：数据：[

// First category
{
  x: -0.20,
  y: 25,
  marker: {
    symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
  }
}, {
  x: 0,
  y: 25,
  marker: {
    symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
  }
}, {
  x: 0.20,
  y: 25,
  marker: {
    symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
  }
}, 
// Second category
{
  x: 0.80,
  y: 25,
  marker: {
    symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
  }
}, {
  x: 1,
  y: 25,
  marker: {
    symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
  }
}, {
  x: 1.20,
  y: 25,
  marker: {
    symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
  }
}]

实例：http://jsfiddle.net/9up6oo3n/

将图像添加到图表上每个组的每列顶部

1 个答案: