Question

我有一个组图

我想在每个

的顶部显示图片

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

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

highchart: add images to top of chart on every column

我的小组图表小提琴

http://jsfiddle.net/KWPsv/90/

我的代码：

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]
  }]
















});

Answer 1

只需使用Renderer.image在图表上添加图片即可。例如，您可以在load事件。

上执行此操作

API参考：
http://api.highcharts.com/highcharts/chart.events.load http://api.highcharts.com/highcharts/Renderer.image

例：
http://jsfiddle.net/kudxL3kh/

如何在组列highcharts上显示图像？

1 个答案: