热图日历dc.js

时间:2018-12-05 05:40:32

标签: dc.js cal-heatmap

我一直在尝试在DC.js中实现热图日历-reference

下面是代码详细信息-

var chartExample = {
initChart : function(experiments) {
    console.log(experiments);

    var ndx = crossfilter(experiments), chart = dc.heatMap("#test"), runDim = ndx
            .dimension(function(d) {
                //console.log("dim " + d.Run + " " + d.Expt);
                return [ +d.Run, +d.Expt ];
            }), runGroup = runDim.group().reduceSum(function(d) {
        //console.log("speed " + d.Speed)
        return +d.Speed;
    });

    chart.width(45 * 20 + 80).height(45 * 5 + 40).dimension(runDim).group(
            runGroup).keyAccessor(function(d) {
        return +d.key[0];
    }).valueAccessor(function(d) {
        return +d.key[1];
    }).colorAccessor(function(d) {
        return +d.value;
    }).title(
            function(d) {
                return "Run:   " + d.key[0] + "\n" + "Expt:  " + d.key[1]
                        + "\n" + "Speed: " + (d.value) + " km/s";
            }).colors(
            [ "#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4",
                    "#1d91c0", "#225ea8", "#253494", "#081d58" ])
            .calculateColorDomain();

    chart.render();
},
initData : function() {
    var data = [ {
        Expt : 1,
        Run : 1,
        date :28/01/15,
        Speed : 1233,

    }, {
        Expt : 1,
        Run : 2,
        date :16/02/15,
        Speed : 150,

    }, {
        Expt : 1,
        Run : 3,
        date :18/03/15,
        Speed : 850,

    }, {
        Expt : 3,
        Run : 4,
        date :13/04/15,
        Speed : 852,

    }, {
        Expt : 1,
        Run : 5,
        date :23/05/15,
        Speed : 1000,

    } ];
    chartExample.initChart(data);
 }
 };
chartExample.initData();

我想以与-d3 js calendar heatmap中类似的格式显示日历热图,但无法解析月份和日期并将其显示为标签。 我只是dc.js的初学者。任何人都可以对此进行指导。任何帮助,将不胜感激。 谢谢

0 个答案:

没有答案