Как создать гистограмму одиночной серии с Highcharts

Question

Я пытаюсь создать простую гистограмму Highcharts с одной серией и несколькими надписями в легенде. Как это делается?

Вот пример: http://jsfiddle.net/jwerre/3g30q4L5/5/

$('#container').highcharts({ 

    chart: { 
     type: 'bar', 
    }, 
    legend: { 
     enabled: true, 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'middle', 
     labelFormatter: function() { 
      return this.name + " - <span class='total'>"+this.y+"</span>" 
     } 
    }, 
    title: { 
     text: 'Simple Bar Graph' 
    }, 
    xAxis: { 
     categories: ['First', 'Second', 'Third', 'Fourth', , 'Fifth'], 
     allowDecimals: false 
    }, 
    yAxis: { 
     allowDecimals: false 
    }, 

    series: [ 
     { 
      data: [ 
       {y: 6, name: 'First', color: 'blue'}, 
       {y: 7, name: 'Second', color: 'green'}, 
       {y: 9, name: 'Third', color: 'yellow'}, 
       {y: 1, name: 'Fourth', color: 'orange'}, 
       {y: 1, name: 'Fifth', color: 'red'} 
      ] 
     } 
    ], 

}); 

Answer 1

К счастью, Highcharts довольно гибкая. Мы можем сделать некоторые трюки (возможно, взломы?), Чтобы достичь таких «недопустимых» задач.

Что вы можете сделать в вашем случае, это создать «поддельные» рядов, а также использовать пользовательские обработчики событий:

series: [ 
     { 
      pointWidth:20, 
      color: colors[0], 
      showInLegend:false, 
      data: [ 
       {y: 6, name: 'First', color: colors[0]}, 
       {y: 7, name: 'Second', color: colors[1]}, 
       {y: 9, name: 'Third', color: colors[2]}, 
       {y: 1, name: 'Fourth', color: colors[3]}, 
       {y: 1, name: 'Fifth', color: colors[4]} 
      ] 
     }, 
     {color: 'blue'}, 
     {color: 'green'}, 
     {color: 'yellow'}, 
     {color: 'orange'}, 
     {color: 'red'} 

    ], 

Для того, чтобы форматировать метки условных обозначений мы можем использовать labelFormatter для легенды:

legend: { 
     labelFormatter: function(){ 
      return names[this.index-1]; 
     } 
    }, 

это установит метку легенды на имя соответствующей точки.

И, наконец, мы должны обращаться с легендой нажмите, чтобы имитировать «нормальное» поведение:

plotOptions: { 
     series: { 
      events: { 
       legendItemClick: function (x) { 
        var i = this.index - 1; 
        var series = this.chart.series[0]; 
        var point = series.points[i]; 

        if(point.oldY == undefined) 
         point.oldY = point.y; 

        point.update({y: point.y != null ? null : point.oldY}); 
       } 
      } 
     } 
    }, 

Это только примеры, вы можете явно улучшить это и приспособиться к вашей собственной потребности.

Удачи!

http://jsfiddle.net/otm0oq2c/3/