如何使 highchart 跨越整个 x 轴?

dota2pro

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

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

该图表仅限于 0.1 年。我怎样才能使图表跨度首尾相连,使其看起来像这样

编辑:问题是 x 轴“投资年数”来自一个变量和没有。年数变化,例如在这个问题中它是 3,所以图表需要像截图一样在 x 轴上从 0 到 3(从左到右)一直扩展,我用 max 在 x 上显示 3 年轴,我将在 y 轴上绘制的 3 个值也将来自变量,例如它的 '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>

波塔切克

您需要在[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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章