通过Ajax将原始数据添加到dc.js复合图表的简单方法 [英] Simple way to add raw data to dc.js composite chart via Ajax

问题描述

我有一个2个折线图的复合图表，但我需要添加第三个图表。

I have a composite chart of 2 line charts however I need to add a third chart to it.

这第三个图表将有这些独特的属性：

This third chart will have these unique properties:

• 数据将通过ajax调用进入，并可作为二维数组[[timestamp，value]，[timestamp，value] 。]


• 每个新的ajax调用都需要替换上一个调用的值


• 它不需要考虑任何过滤器，

这是图表目前只有两个图表的外观。

This is how the chart currently looks with only two of the charts

这是我的代码与第三线图的开始...假设我有新的数据可用数组我有点失去最好的/最简单的方法来处理这个。

This is my code with the start of a third line graph... Assuming I have the array of new data available i'm at a little loss of the best/simplest way to handle this.

timeChart
    .width(width).height(width*.333)
    .dimension(dim)
    .renderHorizontalGridLines(true)
    .x(d3.time.scale().domain([minDate,maxDate]))
        .xUnits(d3.time.months)
        .elasticY(true)
        .brushOn(true)
        .legend(dc.legend().x(60).y(10).itemHeight(13).gap(5))
    .yAxisLabel(displayName)
    .compose([
      dc.lineChart(timeChart)
      .colors(['blue'])
      .group(metric, "actual" + displayName)
      .valueAccessor (d) -> d.value.avg
      .interpolate('basis-open')
      .dimension(dim),
    dc.lineChart(timeChart)
      .colors(['red'])
      .group(metric, "Normal " + displayName)
      .valueAccessor (d) -> d.value.avg_avg
      .interpolate('basis-open'),
     dc.lineChart(timeChart)
        .colors(['#666'])
        .y()#This needs to be scaled and labeled on the right side of the chart
        .group() #I just want to feed a simple array of values into here
     ])

还有注意：我注意到我可能是一个小的bug与图例呈现。正如你在图例中可以看到的，它们都有相同的标签，但我在第二个.group（）参数中使用了不同的字符串。

Also side note: I've noticed what I might be a small bug with the legend rendering. As you can see in the legend both have the same label but i've used different strings in the second .group() argument.

推荐答案

目前，您最好的选择是创建一个假群组。真的图表上的 .data 方法应该这样做，但它不适用于从堆栈mixin派生的图表。

Currently your best bet is to create a fake group. Really the .data method on the charts is supposed to do this, but it doesn't work for charts that derive from the stack mixin.

https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted

这篇关于通过Ajax将原始数据添加到dc.js复合图表的简单方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！