highcharts - x轴范围大时如何使highcharts水平滚动

Question

我正在动态生成我的 x 轴和 y 轴数据并显示高图，但是当 x 轴范围很高且间隔很小时，图表会变得混乱。

如何制作高图表以制作正常的水平滚动图？

这是我现在使用的：

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

//CODE FOR HIGHCHARTS JS
function makeChart() {
    $('#container').highcharts({
        chart: {
            type: 'line',
            marginRight: 130,
            marginBottom: 100
        },
        title: {
            text: 'Banana',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: banana.com',
            x: -20
        },
        xAxis: {
            categories: xlist
        },
        yAxis: {
            title: {
                text: 'No. of C'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: 'C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: $("#repoSelector option:selected").text(),
            data: ylist
        }]
    });
}

Answer 1

实现滚动条的两种方式。

选项1

您将需要使用highstock.js 而不是渲染股票图表，而必须渲染highchart。

然后启用滚动条

  scrollbar: {
        enabled: true
    }

检查滚动条和相关操作的 API here。

Here我摆弄了一个例子。

选项 2

尝试将min&max属性设置为x-axis.

xAxis: {
            categories: [...],
            min: 0,
            max:9
}

在 x 轴上一次显示 10 个类别，为其余类别添加滚动。找到摆弄的例子here。

Answer 2

要在 x 轴上启用滚动条，试试这个

xAxis: {
  categories: xlist,
  min: 0,
  max: 4,
  scrollbar: {
        enabled: true
  },
  },

在此处检查 jfiddle：https ://jsfiddle.net/BhavyaAprajita/zja90wf2/1/

另外，请确保导入 highstock 库

src="https://code.highcharts.com/stock/highstock.js"

Answer 3

添加这个

const Highcharts = require('highcharts/highstock');

如果你有评论这个

// import Highcharts from 'highcharts';

将 xAxis 更改为这样

xAxis : {
               categories: [],
                min:0,
                max:9,
                scrollbar: {
                    enabled: true
                }
            }

Answer 4

利用

require('highcharts/highmaps') instead of require('highcharts') in imports<br>
@NgModule({<br>
    ...<br>
   imports: [<br>
    BrowserModule, <br>
     ChartModule.forRoot( <br>
      require('highcharts/highmaps')<br>
      ],<br>
})