Временная шкала/График работы в highcharts

Question

Есть ли способ сделать график/график в HighCharts, который похож на этот? https://developers.google.com/chart/interactive/docs/gallery/timeline#an-advanced-example.

Я нашел http://jsfiddle.net/VenomXLR/u3eWz/, который достаточно близко, но не может видеть, как ставить метки в теле бара ... например

 data: [{ 
      label:'foo bar', 
      x: 0, 
      low: Date.UTC(2013, 07, 03, 0, 0, 0), 
      high: Date.UTC(2013, 07, 03, 4, 0, 0) 
     } 

Это http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/ также близко

Answer 1

Вы может включить dataLabels и установить для них inside на номер true. Демонстрация: http://jsfiddle.net/u3eWz/322/

plotOptions: { 
    columnrange: { 
    grouping: false, 
    dataLabels: { 
     enabled: true, 
     inside: true, 
     format: '{point.series.name}' 
    } 
    } 
}, 

Другой вариант мог бы попытаться Gantt chart. Он разрабатывается, но для ваших требований уже следует работать нормально.

Демо: http://jsfiddle.net/o3woh3ye/

var year = 365 * 1000 * 60 * 60 * 24; 
 

 
// THE CHART 
 
Highcharts.chart('container', { 
 
    chart: { 
 
     type: 'gantt' 
 
    }, 
 
    title: { 
 
     text: 'Gantt Chart' 
 
    }, 
 
    xAxis: [{ 
 
     type: 'datetime', 
 
     tickInterval: year * 5, 
 
     labels: { 
 
      format: '{value:%Y}', 
 
      style: { 
 
       fontSize: '15px' 
 
      } 
 
     }, 
 
     gridLineWidth: 1, 
 
     maxPadding: 0.2 
 
    }], 
 
    yAxis: [{ 
 
     categories: ['President', 'Vice President', 'Secretary of State'], 
 
     reversed: true, 
 
     grid: true 
 
    }], 
 
    series: [{ 
 
     showInLegend: false, 
 
     dataLabels: { 
 
     \t format: '{point.taskName}' 
 
     }, 
 
     data: [{ 
 
      start: Date.UTC(1780,0,1), 
 
      end: Date.UTC(1788,0,1), 
 
      taskGroup: 0, 
 
      taskName: 'George Washington' 
 
     }, { 
 
      start: Date.UTC(1788,0,1), 
 
      end: Date.UTC(1794,0,1), 
 
      taskName: 'John Adams', 
 
      taskGroup: 0 
 
     }, { 
 
      start: Date.UTC(1770,0,1), 
 
      end: Date.UTC(1780,0,1), 
 
      taskName: 'John Adams', 
 
      taskGroup: 1 
 
     }, { 
 
      start: Date.UTC(1780,0,1), 
 
      end: Date.UTC(1790,0,1), 
 
      taskName: 'Name Name', 
 
      taskGroup: 2 
 
     }] 
 
    }] 
 
});

#container { 
 
    max-width: 800px; 
 
    height: 400px; 
 
    margin: 1em auto; 
 
}

<script src="http://github.highcharts.com/highcharts.js"></script> 
 

 
<script src="http://github.highcharts.com/gantt/modules/gantt.src.js"></script> 
 

 
<div id="container"></div>