2017-10-12 156 views
1

我使用Highcharts渲染柱状图与钻取使用下列选项:HIghcharts柱形图有超过50个数据点

chart: { 
    type: 'column', 
    inverted: true, 
}, 
xAxis: { 
    type: 'category', max: 5, 
}, 
yAxis: { 
    title: { text: '' }, 
    labels: { 
    enabled: false 
    }, 
}, 

我的系列包含超过50个数据点。当我尝试向下滚动时,它会显示索引号而不是x轴标签。它开始胡作非为的,当数据点的数量超过50

但“columnrange”图形的数量并自动处理这种情况。

如何增加最大允许数据点的限制?

Demo code (jsfiddle)

PS:父库HighStocks。

+0

你可以分享你的整个代码?很难说没有看到更多的是什么错误。正如你在这个例子中看到的那样:50分不是问题:http://jsfiddle.net/sLmj0z5z/ – ewolden

+0

https://jsfiddle.net/vynww178/ –

回答

0

它看起来像重复值只被绘制一次。因为你正在强制系列中的数据点数量,所以这就是为什么你会看到空白。有图表显示你所希望的方式

一种方法是这样的:https://jsfiddle.net/wf_4/vynww178/1/

我在这里做的是去除了各系列点文本并将其添加为y轴的类别,其数据将被与...对齐。

Highcharts.chart('container', { 
 
    chart: { 
 
    type: 'bar', 
 
    marginLeft: 150 
 
    }, 
 
    title: { 
 
    text: 'Most popular ideas by April 2016' 
 
    }, 
 
    subtitle: { 
 
    text: 'Source: <a href="https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api">UserVoice</a>' 
 
    }, 
 
    xAxis: { 
 
    type: 'category', 
 
    title: { 
 
     text: null 
 
    }, 
 
    min: 0, 
 
    max: 4, 
 
    scrollbar: { 
 
     enabled: true 
 
    }, 
 
    tickLength: 0, 
 
    categories: ['Gantt chart', 
 
     'Autocalculation and plotting of trend lines', 
 
     'Allow navigator to have multiple data series', 
 
     'Implement dynamic font size', 
 
     'Multiple axis alignment control', 
 
     'Stacked area (spline etc) in irregular datetime series', 
 
     'Adapt chart height to legend height', 
 
     'Export charts in excel sheet', 
 
     'Toggle legend box', 
 
     'Venn Diagram', 
 
     'Add ability to change Rangeselector position', 
 
     'Draggable legend box', 
 
     'Sankey Diagram', 
 
     'Add Navigation bar for Y-Axis in Highstock', 
 
     'Grouped x-axis', 
 
     'ReactJS plugin', 
 
     '3D surface charts', 
 
     'Draw lines over a stock chart', 
 
     'Data module for database tables', 
 
     'Draggable points', 
 
     'Gantt chart', 
 
     'Autocalculation and plotting of trend lines', 
 
     'Allow navigator to have multiple data series', 
 
     'Implement dynamic font size', 
 
     'Multiple axis alignment control', 
 
     'Stacked area (spline etc) in irregular datetime series', 
 
     'Adapt chart height to legend height', 
 
     'Export charts in excel sheet', 
 
     'Toggle legend box', 
 
     'Venn Diagram', 
 
     'Add ability to change Rangeselector position', 
 
     'Draggable legend box', 
 
     'Sankey Diagram', 
 
     'Add Navigation bar for Y-Axis in Highstock', 
 
     'Grouped x-axis', 
 
     'ReactJS plugin', 
 
     '3D surface charts', 
 
     'Draw lines over a stock chart', 
 
     'Data module for database tables', 
 
     'Draggable points', 
 
     'Draggable legend box', 
 
     'Sankey Diagram', 
 
     'Add Navigation bar for Y-Axis in Highstock', 
 
     'Grouped x-axis', 
 
     'ReactJS plugin', 
 
     '3D surface charts', 
 
     'Draw lines over a stock chart', 
 
     'Data module for database tables', 
 
     'Draggable points', 
 
     'Draggable legend box', 
 
     'Sankey Diagram', 
 
     'Add Navigation bar for Y-Axis in Highstock', 
 
     'Grouped x-axis', 
 
     'ReactJS plugin', 
 
     '3D surface charts', 
 
     'Draw lines over a stock chart', 
 
     'Data module for database tables', 
 
     'Draggable points' 
 

 
    ] 
 
    }, 
 
    yAxis: { 
 
    min: 0, 
 
    max: 1200, 
 
    title: { 
 
     text: 'Votes', 
 
     align: 'high' 
 
    } 
 

 
    }, 
 
    plotOptions: { 
 
    bar: { 
 
     dataLabels: { 
 
     enabled: true 
 
     } 
 
    } 
 
    }, 
 
    legend: { 
 
    enabled: false 
 
    }, 
 
    credits: { 
 
    enabled: false 
 
    }, 
 
    series: [{ 
 
    name: 'Votes', 
 
    data: [ 
 
     1000, 
 
     575, 
 
     523, 
 
     427, 
 
     399, 
 
     309, 
 
     278, 
 
     239, 
 
     235, 
 
     203, 
 
     182, 
 
     157, 
 
     149, 
 
     144, 
 
     143, 
 
     137, 
 
     134, 
 
     118, 
 
     118, 
 
     117, 
 
     1000, 
 
     575, 
 
     523, 
 
     427, 
 
     399, 
 
     309, 
 
     278, 
 
     239, 
 
     235, 
 
     203, 
 
     182, 
 
     157, 
 
     149, 
 
     144, 
 
     143, 
 
     137, 
 
     134, 
 
     118, 
 
     118, 
 
     117, 
 
     157, 
 
     149, 
 
     144, 
 
     143, 
 
     137, 
 
     134, 
 
     118, 
 
     118, 
 
     117, 
 
     157, 
 
     149, 
 
     144, 
 
     143, 
 
     137, 
 
     134, 
 
     118, 
 
     118, 
 
     117 
 
    ] 
 
    }] 
 
});
<div id="container" style="height: 1000px; min-width: 320px; max-width: 600px; margin: 0 auto"></div> 
 

 
<script src="https://code.highcharts.com/stock/highstock.js"></script> 
 
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

+0

我需要改变串行数据的结构,因为我还需要包括每个点的深入图表。我该如何做到这一点? –

+0

您仍然可以在系列中使用一个对象,它只是您在y轴上设置的类别。例如'data:[{y:1000,url:“URLhere”},{y:999,url:“URLhere”}]' – wf4

+0

但是在这种情况下,我需要x轴的不同标签。 –

1

添加到wf4answer,对于深入分析部分,你可以检查此one

+0

https://stackoverflow.com/a/46714620/2920114帮助了我。但是,除了@ wf4的回答,你的回答也帮助了我。 –