javascript – ZingChart X轴标签显示为数字而不是字符串

2019-05-19 11:27:15 阅读：202 来源： 互联网

我正在使用ZingChart库来绘制API调用的结果.当我为图表数据对象的“值”字段传入一个普通数组时,一切正常.但是,当我传入一个由Object.keys(titleSet)构成的数组(其中titleSet是一个普通的Javascript对象)时,图形显示如下：

Example Chart

如您所见,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团队的成员.

感谢您更新您的问题.问题是你已经在variablechartData之前定义了你的变量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时,您似乎都在图表上调用render.你应该有一个初始的zingchart.render(),然后从那里开始使用我们的API.我建议使用setdata方法,因为它取代了一个全新的JSON数据包或修改方法.

我对你如何处理数据做了一些假设.无论如何,请查看以下演示

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的长度决定了图表上显示的节点数.如果您将值更改为标签,则不会发生这种情况.

标签：javascript,ajax,charts,zingchart
来源： https://codeday.me/bug/20190519/1134656.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – ZingChart X轴标签显示为数字而不是字符串