我如何顯示圖像組列highcharts？

-1

我公司擁有一批圖表我如何顯示圖像組列highcharts？

我想對每個

頂部，這樣只有兩個圖像顯示的圖像，所以在x軸子類別的值，如果值是負的，我想顯示圖像2，如果值是正顯示圖像1

我看到這個答案，但無法弄清楚這組圖

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
















});

來源

2017-07-27 Mussaib Siddiqui