Highcharts 数字 x 轴

Question

我有给定格式的数据（见下文），我想绘制它以便数据点之间的间距是非线性的，就像数据集中给定的时间一样。

如果我使用类别，则间距始终为 1。我尝试设置 xAxis: { data: seriesData[0].data } 但这只是对数据点进行编号，从 0 到我有多少行，如果我什么都不给也是一样。

如何将数据集中的值视为具有与其关联的特定 x 值？

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
  </head>
  <body>
    <div id="container" style="position:absolute;bottom:0px;right:0px;left:0px;top:0px;"></div>
    <script>
      var data = [
        ['Time', 'dataset 1', 'dataset 2'],
        [0,      0,2],
        [0.2,    2,3],
        [0.3,    2.3,4.7],
        [0.6,    2,6.2],
        [1,      3.1, 3.1],
        [3,      3.5, 3.0],
        [3.4,    2.8, 1.7]
        /* ... */
      ];
      $(function () {
        // reformat data
        var seriesData = [];

        // add series json with nametag for every label
        data[0].forEach(function(name) {
          seriesData.push({name: name, data: []});
        });

        // for every datum add it to the data field of the series data.
        data.slice(1).forEach(function(datum) {
          datum.forEach(function(item, i) {
            seriesData[i].data.push(item);
          });
        });

        $('#container').highcharts({
          chart: {
            zoomType: 'x'
          },
          title: {
            text: 'Title',
            x: -20
          },
          xAxis: {
            categories: seriesData[0].data
          },
          yAxis: {
            plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
            }]
          },
          legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 3
          },
          series: seriesData.slice(1)
        });
      });
    </script>
  </body>
</html>

Answer 1

我通过将值作为数据 [[x,y], [x,y], ...] 添加到图表中解决了这个问题。

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
  </head>
  <body>
    <div id="container" style="position:absolute;bottom:0px;right:0px;left:0px;top:0px;"></div>
    <script>
      var data = [
        ['Time', 'dataset 1', 'dataset 2'],
        [0,      0,2],
        [0.2,    2,3],
        [0.3,    2.3,4.7],
        [0.6,    2,6.2],
        [1,      3.1, 3.1],
        [3,      3.5, 3.0],
        [3.4,    2.8, 1.7]
        /* ... */
      ];
      $(function () {
        // reformat data
        var seriesData = [];

        // add series json with nametag for every label
        data[0].forEach(function(name) {
          seriesData.push({name: name, data: []});
        });

        // for every datum add it to the data field of the series data.
        data.slice(1).forEach(function(datum) {
          datum.forEach(function(item, i) {
            seriesData[i].data.push([datum[0],item]);
          });
        });

        $('#container').highcharts({
          chart: {
            zoomType: 'x'
          },
          title: {
            text: 'Title',
            x: -20
          },
          xAxis: {
          },
          yAxis: {
            plotLines: [{
              value: 0,
              width: 1,
              color: '#808080'
            }]
          },
          legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 3
          },
          series: seriesData.slice(1)
        });
      });
    </script>
  </body>
</html>

Highcharts 数字 x 轴

Highcharts numeric x-axis

javascript

highcharts