- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我正在使用 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/
我有一个网格样式的饼图(同一网格中有多个饼图),类似于 http://www.zingchart.com/docs/chart-types/pie/#pie__trellis_chart .我使用的代
(我以前问过一次类似的问题,但这个问题又出现了。) 我使用 ZingCharts 制作了一个非常简单的饼图,但即使 ZingCharts 网站上的所有示例都显示了每个切片的百分比,我也无法显示要显示的
我们使用套接字库从我们的服务中下载数据。我正在执行以下操作,将这些数据发送到 zingchart(数据按摩后): myChart.series[0].values.push([xVal, yVal])
在此页面上:http://www.zingchart.com/docs/chart-types/pie/ 许多示例饼图显示每个切片的百分比。但我无法重现这个。如何显示每个切片的百分比。请注意,我还将单
我正在尝试使用 ZingChart 创建多维堆叠条形图。据我所知: 由于某种原因,图像没有显示。它的链接是 ( https://drive.google.com/file/d/0B14IyWv9zwZ
需要绘制一个完全响应且视觉准确的 zingchart。据我所知,我们需要为要在其中绘制 zingchart 的 div 提供以 % 为单位的高度和宽度(例如:100% 或 80%)。在编写 zingc
我想使用 ZingChart 为 x 和 y 轴添加标题。例如,如果我的 x 轴显示年份(2010、2011、2012 等),我希望标题“会计年度”显示在每个年份标签下方 同样,如果我在 y 轴上测量
我想知道是否有任何方法可以在渲染图形后动态添加 scale-x 标记,也许是通过像这样的函数: zingchart.exec('myChart', 'addscalexmarker', { t
我有一个混合图表,带有顶部放置的值框。除了第一个值之外,所有值的背景色都从值框中消失了。这以前工作正常,因为白色背景出现在所有值框后面,并且代码没有更改,所以我不知道为什么背景颜色突然消失了。下面是我
是否可以在zingchart中画一 strip 边框的线? 我有一个 "type" : "line", "values" : [something], "line-color": "#some
我有一个包含多个饼图的视觉效果(我有一个包含多个单独饼图的图形集)。我希望每个饼图的大小能够反射(reflect)每个饼中数据的大小。例如,显示 2010 年收入为 1,000,000 美元的饼图将小
我正在使用向下钻取饼图向下钻取到节点的子节点等。问题是在某些时候,子节点不包含任何数据。有没有一种方法可以在图表内显示一条消息或类似的东西,而不是一个白色区域(因为没有系列数据)来通知用户没有更多的数
我需要在我的图表上添加一些额外的标签,所以我使用了形状。结果如下: http://jsfiddle.net/z3n3qobm/91/ 但我需要将示例中的圆圈与 X 轴的标签对齐。图表必须是响应式的
html file in controller.js $scope.myObj = { "type": "bar", "utc": true, "plotarea":{ "m
每当我以百分比设置 ZingChart 的高度和宽度以使其与所有屏幕尺寸兼容时,它都不起作用。 示例:如果我设置 1% 的高度和 1% 的宽度,则不会发生这种情况。 我将高度和宽度更改为: zingc
因此,我被要求向使用 ZingChart 构建的条形图添加额外的标签层。我们基本上有一个单系列柱状图,用于绘制子类别内特定类别的标准评级。 目前子类别在图表中根本没有作用,因为我绘制了类别中每个标准的
这是我正在尝试做的一个例子: http://jsfiddle.net/4pb8uzt8/13/ $scope.myJson = { 'plot': { 'styles': ['#fff
我想创建一个从 MySQL 数据库中提取的值的静态图表。图表格式为(x 轴:dd/mm/yy hh:mm:ss(对应于 mysql 数据库的时间戳)),y 轴为 double 值。我能够从 MySql
我不确定在 html 页面中将以下 zingchart click 事件处理代码放在哪里。 zingchart.click = 函数(dataStr){ var data = eval('(' + d
我正在尝试提取通过 CFCHART 生成的 zingchart 的 SVG 内容并将其传递给我的服务器以将 SVG 转换为 PNG $('#downloadGraph').click(function
我是一名优秀的程序员,十分优秀!