如何在x轴有较大范围时使highcharts水平滚动 [英] How to make highcharts scrollable horizontally when having big range in x-axis

问题描述

我正在动态生成我的x轴和y轴数据并显示高位图，但当x轴范围较高且间隔较小时，图表变得杂乱无章。

我如何让highcharts制作正常的水平滚动图形？

以下是我现在使用的：

 < div id =containerstyle =min-width：400px; height：400px; margin：0 auto>< / DIV> 
 
 //高级代码JS 
函数makeChart（）{
 $（'＃container'）。highcharts（{
 chart：{
 type ：'line'，
 marginRight：130，
 marginBottom：100 
}，
 title：{
 text：'Banana'，
x：-20 //中心
}，
字幕：{
 text：'来源：banana.com'，
x：-20 
}，
 xAxis：{ 
类别：xlist 
}，
 yAxis：{
 title：{
 text：'C'
}，
 plotLines ：[{
 value：0，
 width：1，
 color：'＃808080'
}] 
}，
 tooltip：{
 valueSuffix：'C'
}，
图例：{
 layout：'vertical'，
 align：'right ，
 verticalAlign：'top'，
x：-10，
y：100，
 borderWidth：0 
}，
 series：[{
名称：$（＃repoSelector option：selected）.text（），
 data：ylist 
}] 
}）; 
} 
  

解决方案

酒吧。

期权1

您需要使用 highstock .js ，而不是呈现股票图表，您必须呈现 高图 。

然后启用滚动条

 滚动条：{
 enabled：true 
} 
  

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

这里 我有一个例子。

选项2

尝试设置 min & max 属性到 x轴。

 xAxis：{
类别：[...]，
分钟：0，
最多：9 
} 
  

一次在x轴上显示10个类别，为其余类别添加滚动。
在这里找到这个混乱的例子 。

I am generating my x-axis and y-axis data dynamically and displaying highcharts, but the chart becomes messy when the x-axis range is high with small intervals.

How do I make highcharts to make normal horizontally scrollable graph?

Here is what I am using right now:

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

解决方案

Two ways to achieve a scroll bar.

Option 1

You will need to use highstock.js and instead of rendering a stock chart, you have to render a highchart.

Then enable the scroll bar

  scrollbar: {
        enabled: true
    }

Check the API for scroll bar and related operations here.

Here I have fiddled an example.

Option 2

Try setting min & max attributes to the x-axis.

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

Displays 10 categories in x-axis at a stretch, adding a scroll for the rest of the categories. find the fiddled example here.

这篇关于如何在x轴有较大范围时使highcharts水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！