标签: zingchart
ZingChart如何在一段时间后加载最新数据并更新图表
我正在使用ZingChart.在加载页面时,图表成功加载MySql数据库中的数据.但是在数据库更新一段时间后如何加载最新数据？请帮帮我.我在index.php页面中尝试了以下代码来执行此操作,但它不起作用.
<script>
var myData=[
<?php
$conn =mysql_connect("localhost","root","") or die ("we couldn't connect!");
mysql_select_db("webauth");
$rs = mysql_query("SELECT * FROM test") or die(mysql_error());
while($row = mysql_fetch_array($rs))
{
echo $row['label'].',';
}?>];
var myLabels=[<?php
$conn =mysql_connect("localhost","root","") or die ("we couldn't connect!");
mysql_select_db("webauth");
$rs = mysql_query("SELECT * FROM test") or die(mysql_error());
while($row2 = mysql_fetch_array($rs))
{
echo '"'.$row2['value'].'"'.',';
}?>];
window.onload=function(){
window.alert(myData);
zingchart.render({
id:'chartDiv',
data:{
"type":"bar",
"scale-x":{
"values":myLabels,
},
"series":[
{
"values":myData
}
]
,
"refresh":{
"type":"feed",
"transport":"http",
"url":"feed.php?",
"interval":200
},
}
});
}
</script> …推荐指数
解决办法
查看次数
动态添加比例标记？
我想知道是否有任何方法可以在渲染图形之后动态添加scale-x标记,可能通过类似的函数:
zingchart.exec('myChart', 'addscalexmarker', {
type: "line",
range: 14,
label: {
text: "label!! yay!"
}
}
我似乎无法弄清楚任何其他方式让这个工作......提前谢谢!
推荐指数
解决办法
查看次数
ZingChart格子饼图的标题
我有一个格子样式饼图(同一网格中有多个饼图),类似于http://www.zingchart.com/docs/chart-types/pie/#pie__trellis_chart.我使用的代码与该页面上的代码非常相似.
我想在每个饼图上添加一个独特的标题.例如,如果有4个饼图,每个饼代表一年中的不同季度,那么第一个将表示"Q1",第二个表示"Q2"等.
推荐指数
解决办法
查看次数
如何在ZingChart中对齐折线图和条形图之间的垂直参考线？
随着ColdFusion 9更新到ColdFusion 11,底层图表引擎从WebCharts3D变为ZingCharts.虽然我设法找到两个库之间的大多数不兼容性的解决方案及其在<cfchart>标签中的实现,但我正在努力解决在ColdFusion 9中没有出现的对齐问题.我甚至没有找到修复尝试纯javascript和HTML.
在WebCharts3D中,引导和刻度在条形图的条形图中居中.组合线和条形图具有指向条形图中心和折线图标记的指南.这与折线图中的行为完全相同.
在ZingCharts中,组合图表或条形图的指南和刻度线留在条形图上,不会通过线条的标记.这是与仅限行的图表不同的行为.x轴标签完美地集中在两个引擎中.
你可以在这里看到一个例子:http://jsfiddle.net/yo3uta96/
问题:
我没有公开的页面,其中有统计天气数据显示雨,风,温度等,它们以多个图表彼此相同的方式表示.其中一些是折线图,其中一些是条形图,其中一些是组合图表.这是一个动态创建的页面,用户可以在此过程中选择最多365天的日期范围.页面上的每个图表都具有相同数量的数据点.当要显示的数据点超过80个时,条形图会变成面积图,折线图变成没有标记的折线图.
我想要实现的目标:
我希望图表,数据点,指南和刻度线与x轴标签的排列方式相同.
我尝试了什么:
我设法通过将offsetStart和offsetEnd添加到仅限行的图表来排列数据点,这是必要的,因为在组合图表中,折线图的第一个标记位于相应的第一个条的中心,不再位于y轴上如折线图.最后一个标记也是如此.
不幸的是,添加偏移量并不能解决刻度和指南的对齐问题.我尝试了几乎所有可能的组合与指南,minorTicks,minorGuides和抵消无济于事.在理想的世界和一些边框中,每个x轴标签都显示在图表上,禁用指南并将次要刻度设置为1可能有效.但是,当增加数据点的数量时,此方法将停止工作.
题:
如何使用相同数量的数据点以条形图和折线图排列指南和刻度,ZingCharts处理x轴标签,这些标签看起来完全对齐图表？
推荐指数
解决办法
查看次数
Zing图表 - 如何向工具提示添加更多信息？
我正在尝试Zing Chart并以这种方式拥有JS数组:
"values": [
[1458846060000, 167.272, "Parameter1", "Parameter2", "Parameter3"],
[1458847060000, 150.272, "Parameter1", "Parameter2", "Parameter3"]
]
当悬停在特定点时 - 我可以在工具提示中显示时间,值和系列,但是当用户将鼠标悬停在散点图中的特定点时,如何从同一个数组中显示参数1,2,3？
谢谢.
推荐指数
解决办法
查看次数
由Node填充的条形图是透明的,条形图仅在悬停时显示
这是我正在尝试做的一个例子:http: //jsfiddle.net/4pb8uzt8/13/
$scope.myJson = {
'plot': {
'styles': ['#fff', 'red', 'pink']
},
'scale-x': {
'values': ['white', 'red', 'pink']
},
'type': 'bar',
'series': [{
'text': 'Product History Color',
'values': [2, 6, 8]
}]
}
我正在使用Zingchart(2.3.0)和AngularJs(1.4.7)以及Ionic(1.1.0)
到目前为止,我的应用程序中的所有图表都运行良好.但是当我尝试自定义条形填充时,我得到了一个奇怪的行为.条形图是不可见的,当鼠标悬停时,会显示条形图.试图找出它来自哪里,但没有发现什么奇怪的.
任何的想法 ？我使用了与JSFiddle中显示的完全相同的json,它实际上是一个复制粘贴.
透明棒
谢谢你的时间.
更新
fill: url(#...)我的AngularJs应用程序无法识别该属性,因为我不在根URL中.示例app/graph,只有在我将状态'graph'添加到属性中时它才会起作用:
url(graph#...)
那么我的问题是,有没有办法在不使用渐变的情况下实现我想要做的事情？
我想避免为我的应用程序的每个状态添加一个标记来解决问题.
推荐指数
解决办法
查看次数
Zingchart没有正确绘制超过10列的CSV
场景:
我需要从具有固定列数的CSV中在Zingchart中绘制数据(37).此CSV有一个标题,用于定义图表的图例.
问题:
如果我在标题中定义的元素数量少于10(包括X轴名称),那么一切都很好.前九列获得正确的图例,其他列使用默认值命名Series XX.链接到要点
在数据中我试过乱搞引号",'但它没有改变行为.
Sample graph
Times|Line_1|Line_2|Line_3|Line_4|Line_5|Line_6|Line_7|Line_8|Line_9|"Line_10" "Line_11" Line_12 Line_13 Line_14 Line_15 Line_16 Line_17 Line_18 Line_19 Line_20 Line_21 Line_22 Line_23 Line_24 Line_25 Line_26 Line_27 Line_28 Line_29 Line_30 Line_31 Line_32 Line_33 Line_34 Line_35 Line_36
1218604835|0.0756521739130562|-0.151304347825771|||||||0.122608695652389|||||||-0.130434782608745|0.0443478260868915|0.232173913043425|||||||-0.172173913043707|||||||||||
1218604836|-0.427826086956543|-0.253043478260679|||||||-0.279130434782701|||||||-0.130434782608745|-0.0573913043477887|0.232173913043425|||||||-0.27391304347816|||||||||||
1218604837|-0.229565217391325|0.0469565217390482|||||||-0.0808695652174265|||||||0.0678260869565293|0.242608695652279|-0.169565217391664|||||||0.0260869565217945|||||||||||
1218604838|0.370434782608697|0.34695652173923|||||||-0.482608695652061|||||||0.0678260869565293|-0.159130434782583|-0.169565217391664|||||||0.224347826086841|||||||||||
1218604839|-0.133043478260902|-0.156521739130767|||||||0.117391304347848|||||||0.266086956522031|0.039130434782578|0.4304347826087|||||||-0.279130434782701|||||||||||
但是,只要我使用CSV |分隔符继续在标题中包含元素,就会出现问题.理想情况下,文件应该是这样的:
Sample graph
Times|Line_1|Line_2|Line_3|Line_4|Line_5|Line_6|Line_7|Line_8|Line_9|Line_10|Line_11|Line_12|Line_13|Line_14|Line_15|Line_16|Line_17|Line_18|Line_19|Line_20|Line_21|Line_22|Line_23|Line_24|Line_25|Line_26|Line_27|Line_28|Line_29|Line_30|Line_31|Line_32|Line_33|Line_34|Line_35|Line_36
1218604835|0.0756521739130562|-0.151304347825771|||||||0.122608695652389|||||||-0.130434782608745|0.0443478260868915|0.232173913043425|||||||-0.172173913043707|||||||||||
1218604836|-0.427826086956543|-0.253043478260679|||||||-0.279130434782701|||||||-0.130434782608745|-0.0573913043477887|0.232173913043425|||||||-0.27391304347816|||||||||||
1218604837|-0.229565217391325|0.0469565217390482|||||||-0.0808695652174265|||||||0.0678260869565293|0.242608695652279|-0.169565217391664|||||||0.0260869565217945|||||||||||
1218604838|0.370434782608697|0.34695652173923|||||||-0.482608695652061|||||||0.0678260869565293|-0.159130434782583|-0.169565217391664|||||||0.224347826086841|||||||||||
1218604839|-0.133043478260902|-0.156521739130767|||||||0.117391304347848|||||||0.266086956522031|0.039130434782578|0.4304347826087|||||||-0.279130434782701|||||||||||
但随后输出完全搞砸了.链接到要点
我在本地运行的图表的HTML代码具有相同的结果:
<!DOCTYPE html>
<html>
<head>
<script src="zingchart_2.3.2/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "zingchart_2.3.2/modules/";
</script>
<style></style>
</head>
<body>
<div id='myChart'></div>
<script>
var myConfig …推荐指数
解决办法
查看次数
在zingChart.render()之后调用回调函数
我正在使用ZingChart.render()方法渲染散点图.它工作正常,给我预期的结果.
我希望在图形渲染完成后执行一些代码.由于JS代码以异步方式执行,因此我想在图形渲染之后执行的代码在渲染图形之前执行.
在JS/ZingChart中是否有任何方法可以在ZingChart渲染完成后成功执行某些代码.
SampleCode.js
zingchart.render({
id:'chartDiv',
data:chartData,
height:400,
width:600
});
ZingChart渲染完成后需要执行的采样行
performance.now()
问候
阿贾伊
推荐指数
解决办法
查看次数
ZingChart X轴标签显示为数字而不是字符串
我正在使用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, …推荐指数
解决办法
查看次数
长标签使Zingchart饼图的大小变小
我正在尝试使用Zingchart库生成饼图.问题是,如果我有长标签,饼图的各个部分变得非常小.我不介意将这些信息放在图例中以防它是唯一的解决方案,但是我如何强制图书馆不在图表片段附近显示这些标签？
推荐指数
解决办法
查看次数