动态地添加到Highcharts [英] Dynamically adding to Highcharts
问题描述
我有我试图添加到我的highcharts选项的JSON对象。
我能够收到通过API的对象,并将其传递给我的highcharts功能,但我没办法把我的数据添加到静态数据绕过它。
VAR DATAS;
DATAS =的getData();
//的getData(); 警报('2datass'+ DATAS);
的console.log(DATAS);
createChart(DATAS);
功能createChart(数据){ 警报('createChart'+数据); //工程 - 输出createChart [对象的对象] [对象的对象] [对象的对象] [对象的对象] [对象的对象]
VAR dynamicData;
对于(VAR I = 0;我LT&= data.length-1;我++)
{
VAR项目=数据[I] dynamicData = dynamicData + {
类型:列,
名称:item.name,
数据:[item.difference]
}; } 警报('动态'+ dynamicData); //工作,但是他说,以前未定义 - 输出动态不确定[对象的对象] [对象的对象] [对象的对象] [对象的对象] [对象的对象] VAR系列= [数据/ *这是我的数据应该坐在* / {
类型:列,
名称:'简,
数据:[300,30]
},{
类型:列,
名称:'约翰',
数据:[-200,50]
},{
类型:列,
名称:'乔',
数据:[444,-25]
},{
类型:列,
名称:乔布',
数据:[444,-25]
},{
类型:列,
名称:'Jooe',
数据:[444,-25]
},{
类型:列,
名称:'简,
数据:[300,30]
}
{
类型:'馅饼',
名称:'总消费,
数据:[{
名称:'简,
Y:13
//颜色:#4572A7//简的颜色
},{
名称:'约翰',
Y:23
//颜色:#AA4643'//约翰的颜色
},{
名称:'乔',
Y:19
//颜色:#89A54E'//乔的颜色
}],
中心:[30,80],
尺寸:100,
showInLegend:假的,
dataLabels:{
启用:假的
}
}];
VAR的选择= {
图:{
renderTo:容器
},
标题:{
文字:客户经理排行榜
},
X轴:{
类别:逐月,一天一天]
},
提示:{
格式:函数(){
变种S;
如果(this.point.name){//饼图
S =''+
this.point.name +:+ this.y +'销售';
}其他{
S =''+
this.x +:+ this.y;
}
返回S;
}
},
标签: {
项目:[{
HTML:销售和LT的总比例; BR />这一个月,
风格:{
左:40点,
顶部:-5px',
颜色:黑
}
}]
},
系列:系列
}; $(文件)。就绪(函数(){
VAR图;
图=新Highcharts.Chart(选件);
}); } 函数的getData(){
//警报('AJAX'); VAR receivedData; //保存你的价值在这里
$阿贾克斯({
键入:GET,
数据类型:JSON
网址:API URL,
异步:假的,
成功:功能(数据){
警报('数据'+数据); //作品
receivedData =数据;
}
}); 返回receivedData;
};
我的解决方案似乎是因为没有被添加动态数据错了。任何帮助将大大AP preciated。
更新时间是code:
VAR dynamicData = {
类型:列,
名称:第一,
数据:[300,30]
}; //如果没有下面的循环,我的图表将显示在上面的条目FIRST
//随着循环,图表省略一切dynamicData
对于(VAR I = 0;我LT&= data.length-1;我++)
{
VAR项目=数据[I] dynamicData = dynamicData + {
类型:列,
名称:item.name,
数据:[item.difference]
}; } 警报('动态'+ dynamicData); //工作,但是他说,以前未定义 - 输出动态不确定[对象的对象] [对象的对象] [对象的对象] [对象的对象] [对象的对象]
// dynamicData应该是第一,然后5等返回的行
VAR系列= [dynamicData,{
类型:列,
名称:'约翰',
数据:[-200,50]
},{
类型:列,
名称:'乔',
数据:[444,-25]
},{
类型:列,
名称:乔布',
数据:[444,-25]
},{
类型:列,
名称:'Jooe',
数据:[444,-25]
},{
类型:列,
名称:'简,
数据:[300,30]
}
{
类型:'馅饼',
名称:'总消费,
数据:[{
名称:'简,
Y:13
//颜色:#4572A7//简的颜色
},{
名称:'约翰',
Y:23
//颜色:#AA4643'//约翰的颜色
},{
名称:'乔',
Y:19
//颜色:#89A54E'//乔的颜色
}],
中心:[30,80],
尺寸:100,
showInLegend:假的,
dataLabels:{
启用:假的
}
}];
修改code,使用.push:
//系列已直接移动到变量的选项
VAR的选择= {
图:{
renderTo:容器
},
标题:{
文字:客户经理排行榜
},
X轴:{
类别:逐月,一天一天]
},
提示:{
格式:函数(){
变种S;
如果(this.point.name){//饼图
S =''+
this.point.name +:+ this.y +'销售';
}其他{
S =''+
this.x +:+ this.y;
}
返回S;
}
},
标签: {
项目:[{
HTML:销售和LT的总比例; BR />这一个月,
风格:{
左:40点,
顶部:-5px',
颜色:黑
}
}]
},
系列:[{
类型:'馅饼',
名称:'总消费,
数据:[{
名称:'简,
Y:13
//颜色:#4572A7//简的颜色
},{
名称:'约翰',
Y:23
//颜色:#AA4643'//约翰的颜色
},{
名称:'乔',
Y:19
//颜色:#89A54E'//乔的颜色
}],
中心:[30,80],
尺寸:100,
showInLegend:假的,
dataLabels:{
启用:假的
}
}]
};
//我现在可以把数据直接到seriese(虽然item.difference不
//工作..也许是因为它是一个数组) 对于(VAR I = 0;我LT&= data.length-1;我++)
{
VAR项目=数据[I] options.series.push({
类型:塔,
名:item.name,
数据:item.data
});
警报('datavalue'+ item.data);
}
$(文件)。就绪(函数(){
VAR图;
图=新Highcharts.Chart(选件);
});
解答!
这似乎这样的伎俩。谢谢斯佩兰斯基DANIL对和我一起奋斗 - 多AP preciated
VAR DATAS;
DATAS =的getData();
createChart(DATAS);
功能createChart(数据){ VAR的选择= {
图:{
renderTo:容器
},
标题:{
文字:客户经理排行榜
},
X轴:{
类别:逐月,一天一天]
},
提示:{
格式:函数(){
变种S;
如果(this.point.name){//饼图
S =''+
this.point.name +:+ this.y +'销售';
}其他{
S =''+
this.x +:+ this.y;
}
返回S;
}
},
标签: {
项目:[{
HTML:销售和LT的总比例; BR />这一个月,
风格:{
左:40点,
顶部:-5px',
颜色:黑
}
}]
},
系列:[{
类型:'馅饼',
名称:'总消费,
数据:[{
名称:'简,
Y:13
//颜色:#4572A7//简的颜色
},{
名称:'约翰',
Y:23
//颜色:#AA4643'//约翰的颜色
},{
名称:'乔',
Y:19
//颜色:#89A54E'//乔的颜色
}],
中心:[30,80],
尺寸:100,
showInLegend:假的,
dataLabels:{
启用:假的
}
}]
};
对于(VAR I = 0;我LT&= data.length-1;我++)
{
VAR项目=数据[I] options.series.push({
类型:塔,
名:item.name,
数据:[item.data]
}); } $(文件)。就绪(函数(){
VAR图;
图=新Highcharts.Chart(选件);
}); } 函数的getData(){
//警报('AJAX'); VAR receivedData; //保存你的价值在这里
$阿贾克斯({
键入:GET,
数据类型:JSON
网址:API URL,
异步:假的,
成功:功能(数据){
警报('数据'+数据); //作品
receivedData =数据;
}
}); 返回receivedData;
};
问题是其中包含了循环:
dynamicData = dynamicData + {
类型:列,
名称:item.name,
数据:[item.difference]
};
第一次 dynamicData code>是
未定义
。当我们总结未定义
和对象
我们把他们都到字符串
和concatinate它,所以你得到的字符串未定义的翻译:
,那么'未定义[对象的对象] [对象的对象]'
等的(转换为字符串
对象的翻译:
)的
I have a json object which I am trying to add to my highcharts options.
I am able to recieve the object via API, and pass it to my highcharts function, But I am unable to add my data to the static data around it.
var datas;
datas = getData();
//getdata();
alert('2datass'+datas);
console.log(datas);
createChart(datas);
function createChart(data){
alert('createChart'+data); // works - outputs createChart[object Object][object Object][object Object][object Object][object Object]
var dynamicData;
for(var i =0;i <= data.length-1;i++)
{
var item = data[i];
dynamicData = dynamicData + {
type: 'column',
name: item.name,
data: [item.difference]
};
}
alert('dynamic' +dynamicData); // works, but says undefined before - outputs dynamic undefined[object Object][object Object][object Object][object Object][object Object]
var series = [data /*This is where my data should sit*/,{
type: 'column',
name: 'Jane',
data: [300, 30]
}, {
type: 'column',
name: 'John',
data: [-200, 50]
}, {
type: 'column',
name: 'Joe',
data: [444, -25]
}, {
type: 'column',
name: 'Jobe',
data: [444, -25]
}, {
type: 'column',
name: 'Jooe',
data: [444, -25]
},{
type: 'column',
name: 'Jane',
data: [300, 30]
}
, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13
//color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23
//color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19
//color: '#89A54E' // Joe's color
}],
center: [30, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}];
var options = {
chart: {
renderTo: 'container'
},
title: {
text: 'Account Managers Leaderboard'
},
xAxis: {
categories: ['Month on Month', 'Day on Day']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' sales';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total proportion of sales <br />this month',
style: {
left: '40px',
top: '-5px',
color: 'black'
}
}]
},
series: series
};
$(document).ready(function() {
var chart;
chart = new Highcharts.Chart(options);
});
}
function getData(){
//alert('ajax');
var receivedData; // store your value here
$.ajax({
type: "GET",
dataType: "json",
url: "API URL",
async: false,
success: function(data){
alert('data'+data); //works
receivedData = data;
}
});
return receivedData;
};
My solution seems to be the wrong one as the dynamic data is not being added. Any help would be greatly appreciated.
UPDATED CODE:
var dynamicData = {
type: 'column',
name: 'FIRST',
data: [300, 30]
};
//Without the following loop, my chart will display the above entry "FIRST"
//With the loop, the chart omits everything in dynamicData
for(var i =0;i <= data.length-1;i++)
{
var item = data[i];
dynamicData = dynamicData + {
type: 'column',
name: item.name,
data: [item.difference]
};
}
alert('dynamic' +dynamicData); // works, but says undefined before - outputs dynamic undefined[object Object][object Object][object Object][object Object][object Object]
//dynamicData should be 'FIRST' and then 5 other returned rows
var series = [dynamicData, {
type: 'column',
name: 'John',
data: [-200, 50]
}, {
type: 'column',
name: 'Joe',
data: [444, -25]
}, {
type: 'column',
name: 'Jobe',
data: [444, -25]
}, {
type: 'column',
name: 'Jooe',
data: [444, -25]
},{
type: 'column',
name: 'Jane',
data: [300, 30]
}
, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13
//color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23
//color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19
//color: '#89A54E' // Joe's color
}],
center: [30, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}];
AMENDED CODE, USING .push:
// series has been moved straight into the options variable
var options = {
chart: {
renderTo: 'container'
},
title: {
text: 'Account Managers Leaderboard'
},
xAxis: {
categories: ['Month on Month', 'Day on Day']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' sales';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total proportion of sales <br />this month',
style: {
left: '40px',
top: '-5px',
color: 'black'
}
}]
},
series: [{
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13
//color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23
//color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19
//color: '#89A54E' // Joe's color
}],
center: [30, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
};
//I can now push data straight to seriese (although item.difference doesn't
// work .. perhaps because it's an array)
for(var i =0;i <= data.length-1;i++)
{
var item = data[i];
options.series.push({
"type": "column",
"name": item.name,
"data": item.data
});
alert('datavalue' +item.data);
}
$(document).ready(function() {
var chart;
chart = new Highcharts.Chart(options);
});
ANSWER!
This seems to do the trick. Thank you to Speransky Danil for struggling along with me - much appreciated.
var datas;
datas = getData();
createChart(datas);
function createChart(data){
var options = {
chart: {
renderTo: 'container'
},
title: {
text: 'Account Managers Leaderboard'
},
xAxis: {
categories: ['Month on Month', 'Day on Day']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' sales';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total proportion of sales <br />this month',
style: {
left: '40px',
top: '-5px',
color: 'black'
}
}]
},
series: [{
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13
//color: '#4572A7' // Jane's color
}, {
name: 'John',
y: 23
//color: '#AA4643' // John's color
}, {
name: 'Joe',
y: 19
//color: '#89A54E' // Joe's color
}],
center: [30, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}]
};
for(var i =0;i <= data.length-1;i++)
{
var item = data[i];
options.series.push({
"type": "column",
"name": item.name,
"data": [item.data]
});
}
$(document).ready(function() {
var chart;
chart = new Highcharts.Chart(options);
});
}
function getData(){
//alert('ajax');
var receivedData; // store your value here
$.ajax({
type: "GET",
dataType: "json",
url: "API URL",
async: false,
success: function(data){
alert('data'+data); //works
receivedData = data;
}
});
return receivedData;
};
The problem is in the loop which contains:
dynamicData = dynamicData + {
type: 'column',
name: item.name,
data: [item.difference]
};
First time dynamicData
is undefined
. When we sum undefined
and Object
we convert both of them to string
and concatinate it, so you get string 'undefined'[object Object]'
, then 'undefined[object Object][object Object]'
and so on (converted to string
object is '[object Object]'
).
这篇关于动态地添加到Highcharts的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!