javascript 将数据字符串作为参数传递给 HighCharts 的函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12620704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass Data String as parameter to a Function for HighCharts
提问by MaVRoSCy
I know this title seems a bit odd, i couldn't explain it better.
我知道这个标题看起来有点奇怪，我无法更好地解释它。
Here is what i need. I have this javascript function and i need to pass the data as a String variable to it:
这是我需要的。我有这个 javascript 函数，我需要将数据作为字符串变量传递给它：
var chart;
function drawChart() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
}
I need to pass this data as a parameter to my function
我需要将此数据作为参数传递给我的函数
[ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ]
[ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['其他', 0.7] ]
How can i do it?
我该怎么做？
I want it to look like something like this
我希望它看起来像这样
var chart;
function drawChart(dataString) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: dataString
}]
});
}
I have tried solution by @moonwave99 :
我已经尝试过@moonwave99 的解决方案：
var browsers = [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
];
and
和
...........
series: [{
type: 'pie',
name: 'Browser share',
data: JSON.stringify(browsers)
}]
............
And my outcome is this:
我的结果是这样的：
Solution: http://jsfiddle.net/USzVy/1/
解决方案：http: //jsfiddle.net/USzVy/1/
var browsers = [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
];
function drawChart() {
var data_str = JSON.stringify(browsers);
var options ={
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
series: [{
type: 'pie',
name: 'Browser share',
data: JSON.parse(data_str)
}]
}
chart = new Highcharts.Chart(options);
}
Thanks
谢谢
回答by balafi
First define your data as an array, not a string:
首先将您的数据定义为一个数组，而不是一个字符串：
var data = [["Firefox",45.0],["IE",26.8],{name: "Chrome",y: 12.8, sliced: true,selected: true},["Safari",8.5],["Opera",6.2],["Others",0.7]];
Then stringify and pass as parameter to your function:
然后字符串化并作为参数传递给您的函数：
var data_str = JSON.stringify(data);
drawChart(data);
Then convert to back to JSON
然后转换回JSON
series: [{
...
data: JSON.parse(data)
}
回答by moonwave99
Use JSON.stringify:
var browsers = [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
...
data : JSON.stringify(browsers)
...
EDIT see fiddle.
编辑见小提琴。
EDIT2: I had a look at this library API, and you don'tneed a string, but an array of options! Read the docs and you'll have it done.
EDIT2：我看了一下这个库API，你不要需要一个字符串，但一组选项！阅读文档，你就会完成。
回答by falsarella
var chart;
function drawChart(dataString) {
// options to create the chart
var options = {
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
series: [{
type: 'pie',
name: 'Browser share',
data: dataString // using the parameter
}]
};
chart = new Highcharts.Chart(options);
}
// here you get the dataString some way
var dataString = [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
];
drawChart(dataString);
回答by Thibault Henry
function drawChart(data) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
series: [{
type: 'pie',
name: 'Browser share',
data: JSON.parse(data)
}]
});
}
var data = "[ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ]";
drawChart(data);
回答by loboss
Excelent, solutions, i was tryng your codes, but my chart do not show nothing, so, i was tracking my values that i pass like parameters, and my problem was that i sending my values like string, i solve this just converting my data with the parseInt() command.
优秀的解决方案，我正在尝试您的代码，但我的图表没有显示任何内容，因此，我正在跟踪我像参数一样传递的值，而我的问题是我像字符串一样发送我的值，我只是通过转换我的数据来解决这个问题使用 parseInt() 命令。
function graficar(var1,var2,var3,var4){
var chart;
var datos=[];
datos[0]=parseInt(var1);
datos[1]=parseInt(var2);
datos[2]=parseInt(var3);
datos[3]=parseInt(var4);
var datos_str =JSON.stringify(datos);
alert(datos_str);
chart = new Highcharts.Chart({
chart: {
renderTo: 'grafico',
type: 'column'
},
title: {
text: 'Titulo de ventas'
},
xAxis: {
categories: ['30%', '40%', '50%', '60%']
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
credits: {
enabled: false
},
series: [{
name: 'Valores',
data: JSON.parse(datos_str)
.. .. ...
…………
Thanks
谢谢
