我正在使用 ZingChart 库来绘制 API 调用结果的图表。当我为图表数据对象的“值”字段传入一个普通数组时，一切正常。但是，当我传入一个由 Object.keys(titleSet)(其中 titleSet 是一个普通的 Javascript 对象)组成的数组时，图形显示如下:
如您所见，x 轴现在标有数字而不是字符串数组。但是当我打印出 Object.keys(titleSet) 的结果与传入普通数组的结果时，它们在控制台中看起来是相同的。谁能帮我弄清楚我做错了什么？
//List of movies inputted by the user
var movieList = [];
var movieSet = {};
var IMDBData = {
"values": [],
"text": "IMDB",
};
var metascoreData = {
"values": [],
"text": "Metascore"
};
var RTMData = {
"values": [],
"text": "Rotten Tomatoes Meter"
};
var RTUData = {
"values": [],
"text": "Rotten Tomatoes User"
};
var chartData = {
"type":"bar",
"legend":{
"adjust-layout": true
},
"plotarea": {
"adjust-layout":true
},
"plot":{
"stacked": true,
"border-radius": "1px",
"tooltip": {
"text": "Rated %v by %plot-text"
},
"animation":{
"effect":"11",
"method":"3",
"sequence":"ANIMATION_BY_PLOT_AND_NODE",
"speed":10
}
},
"scale-x": {
"label":{ /* Scale Title */
"text":"Movie Title",
},
"values": Object.keys(movieSet) /* Needs to be list of movie titles */
},
"scale-y": {
"label":{ /* Scale Title */
"text":"Total Score",
}
},
"series":[metascoreData, IMDBData, RTUData, RTMData]
};
var callback = function(data)
{
var resp = JSON.parse(data);
movieSet[resp.Title] = true;
//Render
zingchart.render({
id:'chartDiv',
data:chartData,
});
};
最佳答案
完全披露，我是 ZingChart 团队的成员。
感谢您更新问题。问题是您在变量 chartData 之前定义了变量 movieSet。解析页面时，自上而下，它在创建变量 chartData 时对空对象执行 Object.keys({})。您应该稍后在 chartData['scale-x']['values'] = Object.keys(moviSet) 上直接将其分配到您的配置中。
var callback = function(data)
{
var resp = JSON.parse(data);
movieSet[resp.Title] = true;
//Render
zingchart.render({
id:'chartDiv',
data:chartData,
});
};
上面的代码也有问题。每次调用此 API 时，您似乎都在调用图表上的渲染。您应该有一个初始的 zingchart.render()，然后从那里开始使用我们的 API .我建议使用 setdata 方法，因为它取代了一个全新的 JSON 数据包或 modify 方法。
我正在对您处理数据的方式做出一些假设。无论如何，请查看以下演示
var movieValues = {};
var myConfig = {
type: "bar",
scaleX:{
values:[]
},
series : [
{
values : [35,42,67,89,25,34,67,85]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 300,
width: '100%'
});
var callback = function(data) {
movieValues[data.title] = true;
myConfig.scaleX.values = Object.keys(movieValues);
zingchart.exec('myChart', 'setdata', {
data:myConfig
})
}
var index = 0;
var movieNamesFromDB = ['Sausage Party', 'Animal House', 'Hot Rod', 'Blazing Saddles'];
setInterval(function() {
if (index < 4) {
callback({title:movieNamesFromDB[index++]});
}
},1000)<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>
<!--Inject End-->
</head>
<body>
<div id='myChart'></div>
</body>
</html>如果您在演示中注意到，scaleX.values 的长度决定了图表上显示的节点数。如果您将 values 更改为 labels，则不会发生这种情况。
关于javascript - ZingChart X 轴标签显示为数字而不是字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38938964/