Как сделать перекрытие данных независимо от столбца highcharts

Question

Я хотел бы иметь что-то похожее на изображение ниже, но столбцы, представляющие классы, теперь складываются вместе. Как я могу их разделить и позволить им загружать динамически? Также мне нужна легенда, в которой говорится, что зеленый - это полоса 1, желтый - полоса 2, оранжевый - полоса 3, а красный - группа 4, как я тоже это делаю? Мой код находится на странице jsfiddle. Мне не разрешено использовать jquery, нужно использовать чистый javascript. Благодарю.

var options = { 
     chart: { 
      renderTo : 'container', 
      type: 'column' 
     }, 
     title: { 
      text: 'Topic & Subtopic Mastery' 
     }, 
     subtitle: { 
      text: 'Average Level-Stream Mastery vs Average Class Mastery' 
     }, 
     xAxis: { 
      categories: topics 
     }, 
     yAxis: { 
      min: 0, 
      max: 100, 
      title: { 
       text: 'Mastery' 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      backgroundColor: '#FFFFFF', 
      align: 'left', 
      verticalAlign: 'top', 
      x: 100, 
      y: 70, 
      floating: true, 
      shadow: true 
     }, 
     tooltip: { 
      shared: true, 
      valueSuffix: ' %' 
     }, 
     plotOptions: { 
      column: { 
       grouping: false, 
       shadow: false 
      } 
     }, 
     series: resultsData 
    }; 

http://jsfiddle.net/kscwx139/2/

Answer 1

Я придумал решение, которое вы ищете с указанием оси х и у данных для уровня и предоставление соответствующей ширины к точке.

$(function() { 
    var chart; 
    $(document).ready(function() { 
     var i = 0; 
     Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { 
      if (i == 0) { 
       i++; 
       return Highcharts.Color(color) 
        .setOpacity(1) 
        .get('rgba'); 
      } else { 
       i++; 
       return Highcharts.Color(color) 
        .setOpacity(0.5) 
        .get('rgba'); 
      } 
     }); 
     var colors = Highcharts.getOptions().colors; 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'column', 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false, 
       borderColor: null 
      }, 
      title: { 
       text: 'Mailboxes over Quota' 
      }, 
      subtitle: { 
       text: 'Mailbox Size in MB' 
      }, 
      exporting: { 
       enabled: false 
      }, 
      credits: { 
       enabled: false 
      }, 
      xAxis: { 
       categories: ["Overall Topic", "Topic 1", "Topic 2"], 
       title: { 
        text: null 
       } 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Total', 
        align: 'high' 
       }, 
       allowDecimals: false, 

      }, 
      tooltip: { 
       formatter: function() { 
        return '' + 
         this.series.name + ': ' + Highcharts.numberFormat(this.y, 0, '.', ','); 
       } 
      }, 
      legend: { 
       enabled: true 
      }, 
      credits: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'Level', 
       color: colors[0], 
       data: [{ 
        y: 86, 
        x: 0.25 
       }, { 
        y: 80, 
        x: 1.25 
       }, { 
        y: 95, 
        x: 2.25 
       }], 
       pointWidth: 80 
      }, { 
       name: '4A', 
       data: [90, 88, 97] 
      }, { 
       name: '4B', 
       data: [95, 78, 92] 
      }, { 
       name: '4C', 
       data: [80, 69, 84] 
      }] 
     }); 
    }); 

}); 

Чтобы показать этикетку внутри вашей колонки, вы можете использовать нижеследующий код.

plotOptions: { 
    column: { 
     dataLabels: { 
      enabled: true, 
      formatter: function() { 
       return this.series.name; 
      }, 
      y: 25, 
     } 
    } 
} 

Вы можете увидеть его в действии на этом JSFIddle