如何 pinPoint highchart 分组条形图变量
How to pinPoint highchart grouped barchart variables
我正在尝试根据用户可以手动处理的滑块更改条形图的高度。
http://jsfiddle.net/h0ow9kLk/2/
示例代码:
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<form oninput="output1.value=slider1.value">
<input type="range" name="slider1" id="slider1" min="17" max="25"/>
<output name="output1" for="slider1"></output>
</form>
<form oninput="output2.value=slider2.value" >
<input type="range" name="slider2" id="slider2" min="5000" max="5000" step="5"/>
<output name="output2" for="slider2"></output>
</form>
<button id="updater">Update</button>
Javascript
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Resistance', 'FuelConsumed', 'FuelCost', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Ship 1',
data: [5, 3, 4, 7, 2],
stack: 'Ship 1'
},
{
name: 'Ship 2',
data: [3, 0, 4, 4, 3],
stack: 'Ship 2'
}]
});
var $slider = $("#updater");
$slider.bind('click', function(e) {
e.preventDefault();
var speed = $("#slider1").val();
var weight = $("#slider2").val();
var fuel;
if(weight == 5000){
if (speed == 17){fuel = 41; }
else if(speed == 18){fuel = 51; }
else if(speed == 19){fuel = 60; }
else if(speed == 20){fuel = 75; }
else if(speed == 21){fuel = 80; }
else if(speed == 22){fuel = 100; }
else if(speed == 23){fuel = 120; }
else if(speed == 24){fuel = 138; }
else if(speed == 25){fuel = 153; }
}
else{ fuel = 0;}
chartColumn.series[0].data[0].value[0].update(parseInt(fuel));
nv.utils.windowResize(chart.update);
});
});
所以更新 code:chartColumn.series[0].data[0].value[0].update(parseInt(fuel));
底部用于尝试更新第一个柱。
但是我认为路径是错误的,因为酒吧的高度没有变化。
我试图做的一个例子是这个
http://jsfiddle.net/ZmnWq/74/
有没有什么地方可以让我学习如何使用正确的路径获取数据,如果可能的话有人可以告诉我如何更改数据值。
这个问题听起来很基础,但我真的是新手。感谢所有帮助!
谢谢!
在您的示例中,仅删除值[0] 将 work.You 需要将您的高图分配给某个对象(在您的示例 chartColumn 中),以便您稍后可以根据该图表对象更改值。在您的情况下,它是未定义的。
要为您的系列添加新点,您可以使用以下代码。详情可见here.
chartColumn.series[0].addPoint([x, 5], false, true);
要添加全新系列,您可以添加以下代码。
chartColumn.addSeries({
name: "ship 3",
data: [4,5,6,7,8]
}, false);
chartColumn.redraw();
要用新值更改整个系列,您可以使用 setData,它会自动重绘图表。
chartColumn.series[0].setData(data,true);
您的示例的工作 fiddle 可以在 here.
中找到
有关轴更新的更多详细信息,您可以参阅以下文档。
我正在尝试根据用户可以手动处理的滑块更改条形图的高度。
http://jsfiddle.net/h0ow9kLk/2/ 示例代码:
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<form oninput="output1.value=slider1.value">
<input type="range" name="slider1" id="slider1" min="17" max="25"/>
<output name="output1" for="slider1"></output>
</form>
<form oninput="output2.value=slider2.value" >
<input type="range" name="slider2" id="slider2" min="5000" max="5000" step="5"/>
<output name="output2" for="slider2"></output>
</form>
<button id="updater">Update</button>
Javascript
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Resistance', 'FuelConsumed', 'FuelCost', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Ship 1',
data: [5, 3, 4, 7, 2],
stack: 'Ship 1'
},
{
name: 'Ship 2',
data: [3, 0, 4, 4, 3],
stack: 'Ship 2'
}]
});
var $slider = $("#updater");
$slider.bind('click', function(e) {
e.preventDefault();
var speed = $("#slider1").val();
var weight = $("#slider2").val();
var fuel;
if(weight == 5000){
if (speed == 17){fuel = 41; }
else if(speed == 18){fuel = 51; }
else if(speed == 19){fuel = 60; }
else if(speed == 20){fuel = 75; }
else if(speed == 21){fuel = 80; }
else if(speed == 22){fuel = 100; }
else if(speed == 23){fuel = 120; }
else if(speed == 24){fuel = 138; }
else if(speed == 25){fuel = 153; }
}
else{ fuel = 0;}
chartColumn.series[0].data[0].value[0].update(parseInt(fuel));
nv.utils.windowResize(chart.update);
});
});
所以更新 code:chartColumn.series[0].data[0].value[0].update(parseInt(fuel));
底部用于尝试更新第一个柱。 但是我认为路径是错误的,因为酒吧的高度没有变化。
我试图做的一个例子是这个 http://jsfiddle.net/ZmnWq/74/
有没有什么地方可以让我学习如何使用正确的路径获取数据,如果可能的话有人可以告诉我如何更改数据值。
这个问题听起来很基础,但我真的是新手。感谢所有帮助!
谢谢!
在您的示例中,仅删除值[0] 将 work.You 需要将您的高图分配给某个对象(在您的示例 chartColumn 中),以便您稍后可以根据该图表对象更改值。在您的情况下,它是未定义的。
要为您的系列添加新点,您可以使用以下代码。详情可见here.
chartColumn.series[0].addPoint([x, 5], false, true);
要添加全新系列,您可以添加以下代码。
chartColumn.addSeries({
name: "ship 3",
data: [4,5,6,7,8]
}, false);
chartColumn.redraw();
要用新值更改整个系列,您可以使用 setData,它会自动重绘图表。
chartColumn.series[0].setData(data,true);
您的示例的工作 fiddle 可以在 here.
中找到有关轴更新的更多详细信息,您可以参阅以下文档。