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

我正在使用ZingChart库来绘制API调用的结果。当我传入图表数据对象的“值”字段的正常数组时，一切正常。然而，当我通过在从Object.keys(titleSet)（其中titleSet是正常Javascript对象）制成的阵列，所述曲线图显示如下：ZingChart显示为数字而不是字符串的X轴标签

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, 
    }); 
};

来源

2016-08-14 pomtree

通常，在我们之前和之后发布图形配置将非常有用。请发布您的代码，以获得更巩固的答案。 – nardecky

编辑我的答案，包括我的配置。 – pomtree

完全披露，我是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 = { 
 
    \t type: "bar", 
 
    \t scaleX:{ 
 
    \t values:[] 
 
    \t }, 
 
\t series : [ 
 
\t \t { 
 
\t \t \t values : [35,42,67,89,25,34,67,85] 
 
\t \t } 
 
\t ] 
 
}; 
 

 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 300, 
 
\t 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> 
 
\t <head> 
 
\t <!--Assets will be injected here on compile. Use the assets button above--> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; 
 
</script> 
 
\t <!--Inject End--> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

如果您在演示中发现，中scaleX.values长度决定有多少节点图中显示。如果您将values更改为labels，则不会发生。

来源

2016-08-15 23:52:00 nardecky

这解决了我的问题。感谢您的帮助和建议，这是我第一次使用ZingCharts :) – pomtree

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

回答

相关问题