代码之家 › 专栏 › 技术社区 › user3951700

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

highcharts

user3951700 · 技术社区 · 7 年前

我计划使用散点序列在highcharts图表的每个条形图上方添加标记(图像)。在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)' }
    }, 
  ],



});
});

1 回复 | 直到 7 年前

daniel_s 7 年前

您的小提琴不起作用,因为您对该系列的定义不正确:

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/