小编Mer*_*ily的帖子

如何在一张ZingChart图表上绘制WeekOnWeek图表?

我试图在一个ZingChart图表上绘制两个线图,并努力弄清楚我应该以什么格式传递数据.

基本上,我有一个时间戳/整数对数组,用于今天和前一周的数据,间隔一小时,例如:

今天= [[timestamp1,1],[timestamp2,4],......,[timestamp18,7]] < - 假设现在是下午6点,所以当天剩下的时间没有数据

week_ago = [[timestamp1,4],[timestamp2,7],......,[timestamp23,1]] < - 全24小时数据

x系列应显示从00:00到23:00的小时数,y系列只是整数.此外,在每个图形点上,我希望工具提示显示日期和整数值.

这听起来很简单,可能是因为我对ZingChart很新,我无法理解.

非常感谢

charts plot date graph zingchart

7
推荐指数
1
解决办法
165
查看次数

如何在zingcharts-angularjs中渲染两个y轴?

我正在尝试使用zingcharts-angularjs指令制作具有双y轴的混合图表.

对于双Y轴,您遵循'scale-y-2'模式,但它在我的AngularJS应用程序中不起作用.有谁知道如何在zingcharts-angularjs中渲染两个y轴?

charts angularjs angularjs-directive zingchart

6
推荐指数
1
解决办法
505
查看次数

ZingChart根据X-Scale更改绘图CSS

我正在使用ZingChart和AngularJS.

我有一个简单的图表,但我想我的情节是红色的,如果它是在过去(如果x尺度日期<当前日期).

我发现我可以设置一些规则

"plot":{
"rules":[
    {
        "rule":"%v  20 && %v < 30",
        "line-color":"#f93",
        "line-width":"8",
        "line-style":"dashed"
    },
]
Run Code Online (Sandbox Code Playgroud)

如果情节值在20-30之间,哪个会改变css.我的问题是 - >如何更改绘图背景颜色依赖X刻度值?我无法在情节属性上引用x-scale propery ..

charts angularjs zingchart

6
推荐指数
1
解决办法
309
查看次数

ZingChart中的两个图表和一个预览

我有2个具有相同x轴的图表,我想要一个预览,当我滚动它时,2个图表应该同时滚动,这个功能是否在ZingChart中可用?

charts zingchart

5
推荐指数
1
解决办法
203
查看次数

如何在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轴标签,这些标签看起来完全对齐图表?

coldfusion charts cfchart zingchart coldfusion-11

5
推荐指数
1
解决办法
412
查看次数

ZingChart - 如何在实时Feed中追加值时保持缩放级别

我有一个实时的数据从Iot平台获取数据,每次接收到一个值并附加到绘图中,在这种情况下,每15秒,绘图在更新时重置为其初始缩放级别.

有没有办法停止图表缩小或记录缩放级别,以便在更新后重置?

设置实时Feed:

      "refresh": {
        "type": "feed",
        "transport": "js",
        "url": "feed()",
        "interval": 15000
      },
Run Code Online (Sandbox Code Playgroud)

获取数据并附加到情节:

  // Get new Data
window.feed = function(callback) {      
    // Issue a get request
   $.getJSON('https://www.thingspeak.com/channels//feed.json?callback=?&amp;offset=0&amp;results=1', function(){})

    // Upon a successful get request...
   .done(function(data){

    var p = []
        p[0] = p[0] = getChartDate(data.feeds[0].created_at);
        p[1] = parseFloat(data.feeds[0].field1);
        var newData2 = [p];

    // Append values to Graph
    $("#myChart").appendSeriesValues({
     "values": [newData2]
     });
  })
}
Run Code Online (Sandbox Code Playgroud)

javascript charts zingchart

5
推荐指数
1
解决办法
205
查看次数

在zingChart.render()之后调用回调函数

我正在使用ZingChart.render()方法渲染散点图.它工作正常,给我预期的结果.

我希望在图形渲染完成后执行一些代码.由于JS代码以异步方式执行,因此我想在图形渲染之后执行的代码在渲染图形之前执行.

在JS/ZingChart中是否有任何方法可以在ZingChart渲染完成后成功执行某些代码.

SampleCode.js

 zingchart.render({ 
      id:'chartDiv',
      data:chartData,
      height:400,
      width:600
    });
Run Code Online (Sandbox Code Playgroud)

ZingChart渲染完成后需要执行的采样行

performance.now()
Run Code Online (Sandbox Code Playgroud)

问候

阿贾伊

javascript charts callback zingchart

5
推荐指数
1
解决办法
310
查看次数

ZingChart单系列条形图组标签

所以我被要求在使用ZingChart构建的条形图中添加一层额外的标签.我们基本上有一个单一的系列柱形图,用于绘制特定类别的子类别内的标准评级.

目前子类别根本不在图表中起作用,因为我绘制了一个类别中每个标准的评级.如何将标准"组合"在一起,以便标签显示每个标准名称,子类别将标签分组在一起.

此外,我无法使用多系列数据,因为每个列都根据其评级/值着色,所以颜色编码的图例根据我的理解是没有意义的.

charts zingchart

5
推荐指数
1
解决办法
329
查看次数

是否有可能在ZingChart的印度系统中显示值?

显示值万卢比,亿卢比,而不是数以百万计.

function formatIndianSuffix(num) {
    var x = parseInt(num).toString();
    var len = x.length;
    var formattedNum = "";
    if (len <= 3) {
        formattedNum = '?' + Math.floor(x);
    } else if (len > 3 && len < 6) {
        formattedNum = '?' + (roundOff(x / 1000)).toString() + ' K'
    } else if (len >= 6 && len < 8) {
        formattedNum = '?' + (roundOff(x / 100000)).toString() + ' L'
    } else if (len >= 8) {
        formattedNum …
Run Code Online (Sandbox Code Playgroud)

javascript charts number-formatting zingchart

5
推荐指数
1
解决办法
63
查看次数

从Zingchart中删除x轴和y轴

我想在我的Zingcharts中完全移除而不是隐藏x和y轴.我有一个不需要x或y轴的图形,虽然我可以隐藏它们,但它们占用了宝贵的空间,从而产生了压缩图形.反正有没有这样做?

javascript charts zingchart

4
推荐指数
1
解决办法
443
查看次数