vue.js - Highcharts Y轴需要在X轴上

问题描述

我正在制作一个实时更新的条形图。我希望它从右到左更新，以便最新的出现在右侧并将之前的推到左侧。但目前它从下到上更新（视频示例）

我尝试在图表上使用倒置选项，但它什么也没做。有什么解决办法吗？js fiddle 上的实时示例。 https://jsfiddle.net/ascnhf12/9/

这些是高图表选项


export const liveChart = {
  liveChartInterval: null,
  colors: ['#547fff'],
  chart: {
    height: 170,
    type: 'bar',
    animation: Highcharts.svg, // don't animate in old IE
    marginRight: 10,
    events: {
      load: function () {

        // set up the updating of the chart each second
        var series = this.series[0];
        liveChartInterval = setInterval(function () {
          var x = (new Date()).getTime(), // current time
            y = Math.random();
          series.addPoint([x, y], true, true);
        }, 1000);
      }
    },
    inverted: true
  },

  time: {
    useUTC: false
  },
  credits: {
    enabled: false
  },
  title: false,
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
  },
  yAxis: {
    title: {
      enabled: false
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br/>',
    pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
  },
  legend: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  series: [{
    name: 'Random data',
    data: (function () {
      // generate an array of random data
      var data = [],
        time = (new Date()).getTime(),
        i;

      for (i = -19; i <= 0; i += 1) {
        data.push({
          x: time + i * 1000,
          y: Math.random()
        });
      }
      return data;
    }())
  }]
};

标签： vue.jshighcharts

您需要使用column图表类型而不是bar：

chart: {
    type: 'column',
    ...
}

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

API 参考： https ://api.highcharts.com/highcharts/chart.type

文档： https ://www.highcharts.com/demo/bar-basic

vue.js - Highcharts Y轴需要在X轴上

问题描述

解决方案

推荐阅读