Javascript 如何在组列图表上显示图像？

我有一张团体表

我想在每个屏幕的顶部显示图像

所以只有两个图像，所以xaxis子类别中的值如果值为负，我想显示image2，如果值为正，则显示image1

我已经看到了这个答案，但在组图中无法找到

我的组图是小提琴

我的代码：

Highcharts.setOptions({
  colors: [
    '#5a9bd4',
    '#faa75b',
    '#7ac36a',
    '#9e67ab',
    '#f15a60',
    '#ce7058',
    '#d77fb4'
  ]
});

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    type: 'column'
  },
  title: {
    text: 'Chart Title'
  },
  credits: {
    enabled: false
  },
  legend: {},
  tooltip: {
    shared: true,
    formatter: function() {
      var s = [],
        xAxis = this.points[0].series.xAxis,
        categoryIndex = xAxis.categories.indexOf(this.x),
        title = this.x,
        subTitle = xAxis.options.subtitles[categoryIndex];
      s.push(title + '<br>');
      s.push(subTitle + '<br>');
      $.each(this.points, function(i, point) {
        s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : ' +
          point.y + '<span>');
      });

      return s.join(' and ');
    },
  },
  plotOptions: {
    series: {
      shadow: false,
      borderWidth: 0,
      pointPadding: 0
    }
  },
  xAxis: {
    subtitles: ['2', '-1', '4', '-3', '7'],
    categories: ['MainTask 1', 'MainTask2', 'MainTask3', 'MainTask4', 'MainTask5'],
    lineColor: '#999',
    lineWidth: 1,
    tickColor: '#666',
    tickLength: 3,
    title: {
      text: 'X Axis Title',
      style: {
        color: '#333'
      }
    }
  },
  yAxis: {
    lineColor: '#999',
    lineWidth: 1,
    tickColor: '#666',
    tickWidth: 1,
    tickLength: 3,
    gridLineColor: '#ddd',
    title: {
      text: 'Y Axis Title',
      rotation: 0,
      margin: 50,
      style: {
        color: '#333'
      }
    }
  },
  series: [{
    y: 0,
    mydata: 10,
    name: 'Designation 1',
    data: [7, 12, 16, 32, 64]
  }, {
    y: 0,

    mydata: 20,
    name: 'Designation 2',
    data: [16, 32, 64, 7, 12]
  }, {
    y: 0,

    mydata: 30,
    name: 'Designation 3',
    data: [32, 64, 7, 12, 16],
  }, {
    mydata: 13,
    name: 'Designation 4',
    data: [7, 12, 16, 32, 64]
  }, {
    y: 0,

    mydata: 23,
    name: 'Designation 5',
    data: [16, 32, 64, 7, 12]
  }, {
    y: 0,

    mydata: 22,
    name: 'Designation 6',
    data: [32, 64, 7, 12, 16]
  }]
















});

Highcharts.setOptions({
颜色：[
“#5a9bd4”，
"faa75b",，
"7ac36a",，
"9e67ab",，
"f15a60",，
"ce7058",，
"d77fb4"
]
});
var图表=新的Highcharts.图表({
图表：{
renderTo:'容器'，
类型：“列”
},
标题：{
文本：“图表标题”
},
学分：{
已启用：false
},
图例：{}，
工具提示：{
分享：是的，
格式化程序：函数（）{
var s=[]，
xAxis=this.points[0].series.xAxis，
categoryIndex=xAxis.categories.indexOf（this.x），
title=this.x，
subTitle=xAxis.options.subtitles[categoryIndex]；
s、 推送（标题+“
”）；
s、 按（字幕+“
”）；
$.each（this.points，function（i，point）{
s、 推送（''+point.series.name+''：'+
点y+“”）；
});
返回s.join（'and'）；
},
},
打印选项：{
系列：{
影子：错，
边框宽度：0，
点填充：0
}
},
xAxis：{
字幕：['2'、'-1'、'4'、'-3'、'7']，
类别：['MainTask 1'、'MainTask2'、'MainTask3'、'MainTask4'、'MainTask5']，
线条颜色：'#999'，
线宽：1，
勾选颜色：'#666'，
长度：3，
标题：{
文本：“X轴标题”，
风格：{
颜色：“#333”
}
}
},
亚克斯：{
线条颜色：'#999'，
线宽：1，
勾选颜色：'#666'，
宽度：1，
长度：3，
gridLineColor:“#ddd”，
标题：{
文本：“Y轴标题”，
轮换：0，
差额：50，
风格：{
颜色：“#333”
}
}
},
系列：[{
y:0，
我的数据：10，
名称：“名称1”，
数据：[7,12,16,32,64]
}, {
y:0，
我的数据：20，
名称：“名称2”，
数据：[16,32,64,7,12]
}, {
y:0，
我的数据：30，
名称：“名称3”，
数据：[32,64,7,12,16]，
}, {
我的数据：13，
名称：“名称4”，
数据：[7,12,16,32,64]
}, {
y:0，
我的数据：23，
名称：“名称5”，
数据：[16,32,64,7,12]
}, {
y:0，
我的数据：22，
名称：“名称6”，
数据：[32,64,7,12,16]
}]
});

只需使用

渲染器.image

即可在图表上添加图像。例如，您可以在

load

事件中执行此操作

API参考：

示例：

---

实际上，我想要一幅关于某些数据的图像。您可以获得每个点的x和y值，使用Axis.toPixels（）函数（）将其更改为像素值，并使用此坐标渲染图像。示例：。实际上，如果副标题中的值为负数，则我需要基于条件的图像。如果为负数，则显示图像1，如果为正数，则显示图像2。我给出了一个示例，说明如何简单地将图像添加到图表中。它们何时显示或在什么条件下显示，取决于您。您可以自己添加适当的条件，例如在load事件中。