高级图表中的时间表/时间表

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/

＆＃13;

＆＃13;

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: {
        	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
        }]
    }]
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;