У меня есть групповая диаграмма

enter image description here

Я хочу показывать изображения поверх каждого введите описание изображения здесь

Итак, есть только два изображения, поэтому значение в подкатегориях xaxis, если значение отрицательное, я хочу показать изображение2, а если значение положительное, показать изображение1

Я видел этот ответ, но не могу понять его в групповой диаграмме

highchart: добавьте изображения вверху диаграммы в каждый столбец

Моя групповая диаграмма Fiddle

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
















});
-1
Mussaib Siddiqui 27 Июл 2017 в 12:31

1 ответ

Лучший ответ

Просто используйте Renderer.image, чтобы добавить изображение на график. Вы можете сделать это, например, на мероприятии load.

Справка по API:
http://api.highcharts.com/highcharts/chart.events.load http://api.highcharts.com/highcharts/Renderer.image

Пример:
http://jsfiddle.net/kudxL3kh/

1
pawel_d 27 Июл 2017 в 14:34
На самом деле я хочу изображение в отношении некоторых данных
 – 
Mussaib Siddiqui
27 Июл 2017 в 15:25
Вы можете получить значение x и y каждой точки, изменить его на значение в пикселях с помощью функции Axis.toPixels () (api.highcharts.com/highcharts/Axis.toPixels) и визуализируйте изображение с использованием этих координат. Пример: jsfiddle.net/9m1fkkxm.
 – 
pawel_d
27 Июл 2017 в 17:13
На самом деле мне нужно изображение на основе условия, если значение в подзаголовке отрицательное, покажите изображение 1, а если оно положительное, покажите изображение 2
 – 
Mussaib Siddiqui
30 Июл 2017 в 11:19
Я привел вам пример, как просто добавить изображение на диаграмму. Когда они появятся или на каких условиях, решать вам. Вы можете самостоятельно добавить соответствующие условия, например, в событии загрузки.
 – 
pawel_d
31 Июл 2017 в 11:44