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

Question

我正在使用 ZingChart 库绘制 API 调用的结果图。当我为图表数据对象的 "values" 字段传入一个普通数组时，一切正常。但是，当我传入一个由 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,
  });
};

Answer 1

完全公开，我是 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，则不会发生这种情况。

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

ZingChart X-axis labels showing as numbers instead of strings

javascript

ajax

charts

zingchart