如何一次将两个值输入 y 轴对应于 Highchart 中的单个 x 轴值

Question

我的要求是使用 X 和 Y 轴绘制 Highchart。 x 轴显示年份，y 轴显示以百万为单位的相应数量。

对于 1966 年，我希望看到我的图表首先遍历到 2396，然后到 435，然后才应该转到下一年 1968，它的值再次为 435。请查看我的评论行 (// y: (2396, 435) 这对我不起作用。请帮助使用 Highchart 解决此问题。

下面是我的代码，你可以直接复制到https://jsfiddle.net/y0kqsrav/编辑器并执行。

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Historic and Estimated Worldwide Population Growth by Region'
    },
    subtitle: {
        text: 'Source: Wikipedia.org'
    },
    xAxis: {
        categories: ['1964', '1966', '1968', '1970'],

        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Billions'
        },
        labels: {
            formatter: function () {
                return this.value / 100;
            }
        }
    },
    tooltip: {
        split: true,
        valueSuffix: ' millions'
    },
    plotOptions: {
        areaspline: {

            stacking: 'areaspline',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666',

            }
        }
    },
    series: [{
        name: 'USA',
        data: [
        {
          x: 1964,
          y: 2416
        },
        {
          x: 1966,
          y: 2396
         // y: (2396, 435),
        },
        {
          x: 1968,
          y: 435
        },
        {
          x: 1970,
          y: 223
        }
        ]
    }]
});

Answer 1

为 1966 年添加另一个数据点

{ x: 1966, 是：435 },

并移除堆叠。

Highcharts.chart('container', {
    chart: {
        type: 'areaspline'
    },
    title: {
        text: 'Historic and Estimated Worldwide Population Growth by Region'
    },
    subtitle: {
        text: 'Source: Wikipedia.org'
    },
    xAxis: {
        categories: ['1964', '1966', '1968', '1970'],

        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Billions'
        },
        labels: {
            formatter: function () {
                return this.value / 100;
            }
        }
    },
    tooltip: {
        split: true,
        valueSuffix: ' millions'
    },
    plotOptions: {
        areaspline: {

    //        stacking: 'areaspline',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666',

            }
        }
    },
    series: [{
        name: 'USA',
        data: [
        {
          x: 1964,
          y: 2416
        },
        {
          x: 1966,
          y: 2396
         // y: (2396, 435),
        },
        {
          x: 1966,
          y: 435
        },
        {
          x: 1968,
          y: 435
        },
        {
          x: 1970,
          y: 223
        }
        ]
    }]
});

https://jsfiddle.net/y0kqsrav/112/

Answer 2

使用类别时，点的x 坐标对应于类别index。因此，您应该像这样定义数据以实现所需的行为：

xAxis: {
    categories: ['1964', '1966', '1968', '1970'],

(...)

  series: [{
    name: 'USA',
    data: [{
        x: 0,
        y: 2416
      },
      {
        x: 1.7, // move it a little bit to the left
        y: 2396
      },
      {
        x: 2.3, // move it a little bit to the right
        y: 435
      },
      {
        x: 4,
        y: 435
      },
      {
        x: 6,
        y: 223
      }
    ]
  }]

现场演示：http://jsfiddle.net/BlackLabel/54s2tcbr/