ZingChart x轴标签显示为数字而不是字符串
ZingChart X-axis labels showing as numbers instead of strings
我正在使用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逻辑运算符和字符串/数字
- Javascript排序字符串或数字
- 制作一个regex来验证只有一个数字的字符串
- 将数字转换为字符串数字
- 将HTML(支持文件)中的令牌(字符串、数字等)传递给LogiXML
- 如何从字符串中删除除字母、数字、空格、感叹号和问号之外的所有内容
- 如何替换JavaScript字符串中除字母和数字之外的所有内容(空格/符号)
- 从JS中的字符串中读取数字的库
- 字符串数字-从123456转换为123456
- JavaScript如何面对字符串数字工作
- 将字符串数字的格式设置为货币
- Javascript:如何检索*字符串*数字的小数位数
- 试图理解无法在JavaScript中改变字符串/数字的概念
- Javascript没有使用parseInt函数添加两个字符串数字
- 在jQuery中将整数格式化为字符串数字
- Regex格式字符串数字与逗号和2个小数在javascript
- 如何使用javascript排序字符串数字
- 转换'字符串数字'到一个数字
- 检查字符串/数字类型的字段是否为空
- JavaScript:将字符串/数字转换为数字或null,0返回0