Highcharts X轴新价值 [英] Highcharts X-Axis New Values
问题描述
var chart; 使用highcharts绘制柱形图如下：
var count = 0;
$（函数（）{
$（文档）.ready（函数（）{
图表= new Highcharts.Chart（{
图表：{
renderTo： 'graph'，
type：'column'，
margin：[50，50，100，80]
}，
title：{
text：'Random数据'
}，
xAxis：{
类别：[
'T1'，
'T2'
]，
startOnTick：true ，
endOnTick：true，
labels：{
rotation：-45，
align：'right'，
style：{
fontSize：'13px '，
fontFamily：'Verdana，sans-serif'
}
}
}，
yAxis：{
min：0，
title：{
text：'Y轴'
}
}，
图例：{
enabled：false
}，
tooltip：{
formatter：function（）{
return'< b> + this.x +' < / b>< br />'+
'提示：'+ Highcharts.numberFormat（this.y，1）;
}
}，
系列：[{
名称：'人口'，
数据：[34.4,21.8]，
dataLabels：{
启用：true，
旋转：-90，
颜色：'#FFFFFF'，
align：'right'，
x：4，
y：10，
style：{
fontSize：'13px'，
fontFamily：'Verdana，sans-serif'
}
}
}]
}）;
}）;
}）;
为了向图表添加新点，我添加了以下函数：
函数addPoints（name，acc）
{
var series = chart.series [0];
series.addPoint（acc，false，true）;
categories = chart.xAxis [0] .categories;
categories.push（name + count）;
count ++;
chart.xAxis [0] .setCategories（categories，false）;
chart.redraw（）;
}
问题在于每次添加新点，一列移出图表。我想保留图表视图中的所有列，所以当我添加一个新点时，图表只会缩小。
检查它在 JSFiddle
预先感谢....
addPoint（Object options，[Boolean redraw]，[Boolean shift]，[Mixed animation]）
在渲染时间后添加一个点到系列。
参数
选项： Number | Array | Object <
点选项。如果选项是一个单一的数字，那么将一个具有该值的点附加到该序列中。如果它是一个数组，则它将分别被解释为x和y值，或者在OHLC或烛台的情况下被解释为[x，open，high ，低，关闭]。如果是对象，则会应用series.data中列出的高级选项。
重新绘制 ：布尔值
默认为true。是否在添加点之后重新绘制图表。添加多个点时，强烈建议将重画选项设置为false，而在添加点完成后显式调用chart.redraw（）。
$ b shift ：
布尔
默认为false。当转换为真时，一个点将从该序列的开始处移开，因为一个被附加到结尾。
动画：混合
默认为true。如果为true，则图形将使用默认动画选项进行动画。
series.addPoint（acc，假，真）;
/ \这是问题，它应该是false
参考
em> I am using highcharts to draw a column chart as following:
var chart;
var count = 0;
$(function () {
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'graph',
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'Random Data'
},
xAxis: {
categories: [
'T1',
'T2'
],
startOnTick: true,
endOnTick: true,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Y-Axis'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'Tip is: '+ Highcharts.numberFormat(this.y, 1);
}
},
series: [{
name: 'Population',
data: [34.4, 21.8],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
});
I added the following function in order to add new points to the chart
function addPoints(name,acc)
{
var series = chart.series[0];
series.addPoint(acc, false, true);
categories = chart.xAxis[0].categories;
categories.push(name+count);
count++;
chart.xAxis[0].setCategories(categories, false);
chart.redraw();
}
The problem is that everytime I add a new point, one column shifts out of the chart. I would like to keep all columns in the chart view, so when I add a new point the chart just zooms out.
Check it on JSFiddle
Thanks in Advance ....
addPoint (Object options, [Boolean redraw], [Boolean shift], [Mixed animation])
Add a point to the series after render time.
Parameters
options: Number|Array|Object
The point options. If options isa single number, a point with that y value is appended to the series.If it is an array, it will be interpreted as x and y values respectively, or inthe case of OHLC or candlestick, as [x, open, high, low, close]. If it is an object, advanced options as outlined under series.data are applied.
redraw: Boolean
Defaults to true. Whether to redraw the chart after the point is added. When adding more thanone point, it is highly recommended that the redraw option beset to false, and instead chart.redraw() is explicitly calledafter the adding of points is finished.
shift: Boolean
Defaults to false. When shift is true, one point is shifted off the start of the series as one is appended to the end. Use this option for live charts monitoring a value over time.
animation: Mixed
Defaults to true. When true, the graph will be animated with default animationoptions. The animation can also be a configuration object with properties durationand easing.
series.addPoint(acc, false, true);
/\ here's the problem, it should be false
Reference
这篇关于Highcharts X轴新价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
