Highcharts 6時間線圖

Question

（Highcharts 版本 6）

除了這個例子中的數據點之外，是否有可能有一個時間線圖表：

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

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

但不使用 highstock 而只使用 highcharts？

我知道可以使用 xrange 模塊，但並不完全相同：

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

如果范圍足夠長以模擬一條線，那么您就無法在線上添加“數據點”，如果您使范圍足夠小以看起來像數據點，那么您就沒有一條線。

注意我知道版本 7 中的新圖表類型“時間線”，但我需要使用版本 6.1

Answer 1

對的，這是可能的。 但是，您不能使用flags系列，因為它僅受 Highstock 支持。 檢查下面發布的演示和代碼。

代碼：

 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>

演示：

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