Javascript 动态添加到Highcharts
我有一个json对象，我正试图将它添加到我的highcharts选项中 我能够通过API接收对象，并将其传递给highcharts函数，但我无法将数据添加到它周围的静态数据中Javascript 动态添加到Highcharts,javascript,json,api,highcharts,Javascript,Json,Api,Highcharts,我有一个json对象，我正试图将它添加到我的highcharts选项中 我能够通过API接收对象，并将其传递给highcharts函数，但我无法将数据添加到它周围的静态数据中 var datas; datas = getData(); //getdata(); alert('2datass'+datas); console.log(datas); createChart(datas);
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;
};
var数据；
datas=getData（）；
//getdata（）；
警报（“2数据”+数据）；
控制台日志（数据）；
创建图表（数据）；
函数createChart（数据）{
警报（'createChart'+数据）；//工作-输出createChart[对象对象][对象对象][对象对象][对象对象对象][对象对象]
变量动态CDATA；
对于（var i=0；i而言，问题在于包含以下内容的循环中：
dynamicData = dynamicData + {
type: 'column',
name: item.name,
data: [item.difference]
};
第一次dynamicData
是undefined
。当我们将undefined
和Object
相加时，我们将两者转换为string
并对其进行压缩，这样就得到string'undefined'[Object Object]
，然后'undefined[Object Object Object][Object]
，依此类推（转换为string
的对象是'[object object]'
）。这似乎可以解决问题。感谢Speransky Danil与我一起努力-非常感谢
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;
};
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: "http://a-website.com/apiv1/summery/get/authKey/1/range/day/",
async: false,
success: function(data){
alert('data'+data); //works
receivedData = data;
}
});
return receivedData;
};
var数据；
datas=getData（）；
创建图表（数据）；
函数createChart（数据）{
变量选项={
图表：{
renderTo:“容器”
},
标题：{
文本：“客户经理排行榜”
},
xAxis：{
类别：[“逐月”、“逐日”]
},
工具提示：{
格式化程序：函数（）{
var s；
如果（this.point.name）{//饼图
s=“”+
this.point.name+'：'+this.y+'销售'；
}否则{
s=“”+
this.x+'：'+this.y；
}
返回s；
}
},
标签：{
项目：[{
html:“本月总销售额比例”
，
风格：{
左：“40px”，
顶部：'-5px'，
颜色：“黑色”
}
}]
},
系列：[{
键入“pie”，
名称：“总消耗量”，
数据：[{
姓名：'简'，
y:13
//颜色：'#4572A7'//简的颜色
}, {
姓名：'约翰'，
y:23
//颜色：'#AA4643'//约翰的颜色
}, {
名字：'乔'，
y:19
//颜色：'#89A54E'//乔的颜色
}],
中间：[30,80]，
尺码：100，
showInLegend:false，
数据标签：{
已启用：false
}
}]
};
对于（var i=0；我当然！谢谢。它不再说未定义。。但是数据仍然没有添加到数据系列中。在底部的原始帖子中更新：）数据看起来像{type:'column'，name:'Persons name'，data:[30]}我怀疑我需要object.push，但对于没有父对象的json对象，我似乎无法这样做。（即父对象：{type:'column'，name:'Persons name'，data:[30]}什么是JavaScript？首先，我非常感谢为JSON对象添加值方面的帮助。也许我们可以把这些修辞问题留到以后再讨论？这是一个开放的平台，面向那些需要帮助和希望贡献的人，我希望你在无法帮到的情况下不要感到压力。我非常乐意为之奋斗：）getData（）返回“[object object][object object][object object][object object][object object][object object]“这些是我希望添加到我的数据系列中的内容
dynamicData = dynamicData + {
type: 'column',
name: item.name,
data: [item.difference]
};
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: "http://a-website.com/apiv1/summery/get/authKey/1/range/day/",
async: false,
success: function(data){
alert('data'+data); //works
receivedData = data;
}
});
return receivedData;
};