Highcharts 6 график времени

Question

(Highcharts version 6)

Возможно ли иметь график в виде временной шкалы в дополнение к точкам данных, как в этом примере:

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

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

но без использования highstock и вместо этого использовать только highcharts?

Я знаю, что можно использовать модуль xrange, но это не совсем то же самое:

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

Если диапазоны достаточно длинные, чтобы моделировать линию, тогда вам не хватаетвозможность добавлять «точки данных» поверх линии, и если вы сделаете диапазоны достаточно маленькими, чтобы выглядеть как точки данных, то у вас не будет линии.

ПРИМЕЧАНИЕ Мне известно о новом типе графика 'timeline' в версии 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/