Highcharts 6时间线图

Question

(Highcharts version 6)

Is it possible to have a time line looking chart in addition to data points like in this example:

https://jsfiddle.net/s1eL30Lh/97/

<script src="https://code.highcharts.com/stock/highstock.js"></script>

but without using highstock and instead only use highcharts?

I know it's possible to use xrange module but it's not quite the same:

https://jsfiddle.net/deep3015/q18yvy75/

If the ranges are long enough to simulate a line then you lack the ability to add "data points" on top of the line, and if you make the ranges small enough to look like data points then you don't have a line.

NOTE I'm aware of the new chart type 'timeline' in version 7 but I need to work with version 6.1

Answer 1

Yes, it is possible. However, you can't use flags series because it is only supported by Highstock. Check the demo and code posted below.

Code:

 function toMs(yeah, month) { return Date.UTC(yeah, month, 1); } var series = [{ // First series name: 'Running', color: 'green', id: 'green', dataRaw: [{ y: 1, xRanges: [ // first value: from; second value: to [toMs(2000, 1), toMs(2002, 8)], [toMs(2006, 10), toMs(2006, 11)] ] }] }, { // Second series name: 'Filed', color: 'yellow', id: 'yellow', dataRaw: [{ y: 1, xRanges: [ // first value: from; second value: to [toMs(2002, 8), toMs(2006, 10)] ] }] }, { // Second series name: 'Granted', color: 'blue', id: 'blue', dataRaw: [{ y: 1, xRanges: [ // first value: from; second value: to [toMs(2006, 11), toMs(2021, 8)] ] }] } ].map(function(series) { series.data = []; series.dataRaw.forEach(function(dataRaw) { dataRaw.xRanges.forEach(function(xRange) { series.data.push([xRange[0], dataRaw.y], [xRange[1], dataRaw.y], [xRange[1], null]); // null breakes the line }); // forEach }); // forEach return series; }); console.log(series); var chart = Highcharts.chart('container', { chart: { type: 'scatter' }, title: { text: 'Example' }, plotOptions: { scatter: { lineWidth: 5, marker: { enabled: true, symbol: 'circle', fillColor: '#FFFFFF', lineWidth: 2, lineColor: null, radius: 5 }, dataLabels: { enabled: true, align: 'right', rotation: -30, x: -2, y: 15, formatter: function() { return Highcharts.dateFormat('%Y-%m', this.x); } }, tooltip: { pointFormatter: function() { return Highcharts.dateFormat('%Y-%m', this.x); } } }, flags: { lineWidth: 1 } }, xAxis: { title: { text: 'Time' }, type: 'datetime', minTickInterval: 365 * 24 * 36e5, labels: { align: 'left' }, plotBands: [{ from: Date.UTC(2000, 10, 27), to: Date.UTC(2004, 11, 1), color: '#EFFFFF', label: { text: 'Office 1', style: { color: '#999999' }, y: 30 } }, { from: Date.UTC(2004, 11, 1), to: Date.UTC(2012, 9, 1), color: '#FFFFEF', label: { text: 'Office 2', style: { color: '#999999' }, y: 30 } }, { from: Date.UTC(2012, 9, 1), to: Date.UTC(2020, 10, 27), color: '#FFEFFF', label: { text: 'Office 3', style: { color: '#999999' }, y: 30 } }] }, yAxis: { tickInterval: 1 }, series: series, annotations: [{ labelOptions: { backgroundColor: 'rgba(255,255,255,0.5)' }, labels: [{ distance: 10, point: { xAxis: 0, yAxis: 0, x: toMs(2002, 8), y: 1 }, text: 'Filled Date' }] }] });

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/6.1/highcharts.js"></script> <script src="https://code.highcharts.com/6.1/modules/annotations.js"></script> <div id="container" style="height: 400px"></div>

Demo:

• https://jsfiddle.net/BlackLabel/6eahoxjv/