首页 文章

如何在x轴有大范围时使高级图表水平滚动

提问于
浏览 次
7

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

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

这是我现在正在使用的：

enter image description here

<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
        }]
    });
}
highcharts

2 回答

  • 2

    两种实现滚动条的方法 .

    选项1

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

    然后启用滚动条

    scrollbar: {
        enabled: true
    }

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

    Here我摆弄了一个例子 .

    选项2

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

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

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

    回复于
  • 17

    要在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"
    回复于

相关问题