如何使高图跨越整个x轴？

Question

我有这篇文章的代码，当我增加年数时，

    xAxis: {
        ....
        min: 0,
        max: 3, // This is dynamic

该图表仅限于 0,1 年。 我怎样才能使图表端到端跨越，使其看起来像这样

编辑：问题是x轴“投资年数”来自一个变量，而没有。 年变化，例如在这个问题中它是 3，所以图表需要 go 在 x 轴上从 0 一直扩展到 3（从左到右），如屏幕截图所示，我使用 max 在 x 上显示 3 年-轴，我将在 y 轴上的 3 个值 plot 也将来自变量，例如它的 '22286,12286,9286' 我将只有这 3 个值，图表将从 0 开始。所以我不能将任何其他任意值放入系列中

 var chart = Highcharts.chart('container', { colors: ['#762232', '#EFCA32', '#007788'], title: { text: '', }, chart: { type: 'area', backgroundColor: null, // spacingRight: 5, spacingTop: 5, spacingBottom: 5, style: { fontFamily: 'Arial, sans-serif', }, plotBorderWidth: 1, plotBorderColor: '#ccc', }, xAxis: { gridZIndex: 4, gridLineWidth: 1, tickInterval: 1, tickWidth: 0, alignTicks: true, gridLineColor: '#762232', minPadding: 0, maxPadding: 0, min: 0, max: 3, title: { text: 'Years Invested', }, labels: { enabled: true, }, }, yAxis: { gridLineWidth: 0, opposite: true, title: { text: 'Hypothetical Value', }, showFirstLabel: false, showLastLabel: false, tickPositioner: function() { var prevTickPos = this.tickPositions, tickPositions = [prevTickPos[0], prevTickPos[prevTickPos.length - 1]], series = this.chart.series; series.forEach(function(s) { tickPositions.push(s.processedYData[s.processedYData.length - 1]); }); tickPositions.sort(function(a, b) { return a - b; }); return tickPositions; }, labels: { enabled: true, align: "right", reserveSpace: true, }, }, tooltip: { enabled: ,1, }: plotOptions: { area: { pointStart, 0: stacking, false: lineColor, '#762232': lineWidth, 1: fillOpacity, 1: dataLabels: { crop, :1, color: '#762232', align: 'right', y, 5: }: marker, { enabled: ,1: symbol, 'circle': radius: 1: states, { hover, { enabled, ,1, }, }: }: }, }: series, [{ data: [] }; { data. [] }. { data, [] }] }). document:getElementById('chartInit'):addEventListener('click', function() { chart,update({ series: [{ data, [0, 22286] }: { data, [0; 12286] }; { data: [0, 9286] }] }); });

 <script src="https://code.highcharts.com/highcharts.js"></script> <button id="chartInit">Init chart</button> <div id="container"></div>

Answer 1

您需要以[x, y]格式定义数据，并使用yearsInvested变量作为第二个点的值。

  const yearsInvested = 10;

  chart.update({
    series: [{
      data: [
        [0, 0],
        [yearsInvested, 22286]
      ]
    }, {
      data: [
        [0, 0],
        [yearsInvested, 12286]
      ]
    }, {
      data: [
        [0, 0],
        [yearsInvested, 9286]
      ]
    }]
  });

---

现场演示： https://jsfiddle.net/BlackLabel/zun7cdge/

API 参考： https://api.highcharts.com/highcharts/series.area.data