时间表/时间表在高层图 [英] Timeline / Schedule in highcharts

问题描述

有没有办法在HighCharts中制作时间表/时间表，看起来与此类似？ https://developers.google.com/chart/ interactive / docs / gallery / timeline＃an-advanced-example 。

我发现 http://jsfiddle.net/VenomXLR/u3eWz/ ，它足够接近，但看不到如何将标签放在酒吧的身体中......例如， p>

  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/获得/ jQuery的/ 3.1.1 / highslide软件/ highcharts.com /树/主/ SA mples / highcharts / demo / columnrange / 也是关闭的

解决方案

您可以启用 dataLabels 并在里面设置 code> 至 true 。演示： http://jsfiddle.net/u3eWz/322/

  plotOptions：{
 columnrange：{
分组：false，
 dataLabels：{
启用：true， 
内：true，
格式：'{point.series.name}'
} 
} 
}，
  

另一个选项可以尝试甘特图。它正在开发中，但对于您的要求应该已经正常工作。

演示： http://jsfiddle.net/o3woh3ye/

  var year = 365 * 1000 * 60 * 60 * 24; // CHARTHighcharts.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：[{类别：['总统'，'副总统'，'国务卿']，扭转：真，格：真}]，系列：[{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}]}]}）;  

< pre class =snippet-code-css lang-css prettyprint-override> #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>

Is there a way to do a timeline / schedule in HighCharts that looks similar to this? https://developers.google.com/chart/interactive/docs/gallery/timeline#an-advanced-example.

I found http://jsfiddle.net/VenomXLR/u3eWz/ which is close enough, but cannot see how to put labels in the body of the bar... eg

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

This http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/ is also close

解决方案

You could enable dataLabels and set inside to true for them. Demo: http://jsfiddle.net/u3eWz/322/

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

Another option could be to try Gantt chart. It is being developed, but for your requirements should be working fine already.

Demo: 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: {
        	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>

这篇关于时间表/时间表在高层图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！