Question

我使用javascript制作html信息中心。我在显示饼图时遇到问题。我希望使用表格来增加长度＆＃39;数据集用于填充饼图。添加长度数据具有以下json格式。

[{＆＃34;添加长度＆＃34;：30.0，＆＃34;未来一周＆＃34;：59.16，＆＃34;上周＆＃34;：0.0，＆＃34; 2017年第一季度＆＃34; ：0.0，＆＃34; 2017年第3季度＆＃34;：0.0，＆＃34; 2017年第1季度总计＆＃34;：83.68，＆＃34; 2017年第3季度总计＆＃34;：83.21，＆＃34;目标＆＃34;： 0.0，＆＃34;自然交付等同于＆＃34;：0.0}，{＆＃34;添加长度＆＃34;：60.0，＆＃34;未来一周＆＃34;：40.84，＆＃34;上周＆＃ 34;：100.0，＆＃34; 2017年第1季度＆＃34;：0.0，＆＃34; 2017年第3季度＆＃34;：0.0，＆＃34; 2017年第1季度总计＆＃34;：0.0，＆＃34; 2017年第3季度总计＆＃ 34;：0.0，＆＃34;目标＆＃34;：0.0，＆＃34;自然交付等同于＆＃34;：0.0}]

添加长度表显示在仪表板上，如下所示。

然而，当我在仪表板上显示饼图时，我得到以下图像。

通过在线阅读，这应该有效。这应该是由添加长度表填充的饼图，其中包含＆＃34; Week Ahead＆＃34;柱。我正在使用的javascript位如下所示。

queue()
.defer(d3.json, "/txtimes1")
.defer(d3.json, "/txtimes2")
.defer(d3.json, "/txtimes3")
.defer(d3.json, "/txtimes4")
.defer(d3.json, "/txtimes5")
.await(makeGraphs);

function makeGraphs(error,txtimes1,txtimes2,txtimes3,txtimes4,txtimes5) {

var addl = txtimes1;
var channel = txtimes2;
var sale = txtimes3;
var daypart = txtimes4;
var day = txtimes5;
//Create a Crossfilter instance
//var ndx1 = crossfilter(prog);
var ndx1 = crossfilter(addl);
var ndx2 = crossfilter(channel);
var ndx3 = crossfilter(sale);
var ndx4 = crossfilter(daypart);
var ndx5 = crossfilter(day);

var AddlDim = ndx1.dimension(function (d) {
    return d["Week Ahead"];
});

var sentimentName = ndx1.dimension(function (d) {
    return d["Week Ahead"];
});

var sentimentGroup = sentimentName.group(function (d) {
    return d["Add Length"];
});

var sentimentPie = dc.pieChart("#sentiment-pie");

var addlength = dc.dataTable("#addl");

var pspace ="\xa0\u0025\xa0\xa0\xa0";
var space ="\xa0\xa0\xa0\xa0";
var colour1="red";
var colour2="orange";
var colour3="FEE11";
var colour4="green";
var colour5="blue";
var colour6="purple";
var colour7="darkred";
var colour8="pink";

sentimentPie
    .width(415)
    .height(415)
    .radius(200)
    .innerRadius(50)
    .dimension(sentimentName)
    .group(sentimentGroup)

    .render()

    .label(function (d) {
        if (sentimentPie.hasFilter() && !sentimentPie.hasFilter(d["Week Ahead"])) {
            return d["Week Ahead"] + '(0%)';
        }
        var label = d.key;

            label += ' (' + d.key + '%)';

        return label;
    });

addlength
    .dimension(AddlDim)
    .group( function (d) { return ''; })
    .sortBy(  function(d) { return d["Week Ahead"]; })

    .columns([{
               label: "Add Length " + space,
               format: function (d) { return d["Add Length"]+space; }
              },
              {
               label: " Week Ahead " + space,
               format: function (d) { return  (d["Week Ahead"] + pspace).fontcolor(colour1); }
               },
              {
               label: "Last Week " + space,
               format: function (d) { return (d["Last Week"] + pspace).fontcolor(colour2); }
               },
              {
               label: "Q1 2017 " + space,
               format: function (d) { return (d["Q1 2017"] + pspace).fontcolor(colour3); }
               },
              {
               label: "Q3 2017 " + space,
               format: function (d) { return (d["Q3 2017"] + pspace).fontcolor(colour4); }
               },
              {
               label: "Q1 2017 Total " + space,
               format: function (d) { return (d["Q1 2017 Total"] + pspace).fontcolor(colour5); }
               },
              {
               label: "Q3 2017 Total " + space,
               format: function (d) { return (d["Q3 2017 Total"] + pspace).fontcolor(colour6); }
               },
              {
               label: "Target " + space,
               format: function (d) { return (d["Target"] + pspace).fontcolor(colour7); }
               },
              {
               label: "Natural Delivery Equiv " + space,
               format: function (d) { return (d["Natural Delivery Equiv %"] + pspace).fontcolor(colour8); }
               }
             ])

    .size(180)
    .beginSlice(0)
    .endSlice(10)
    .order(d3.descending);

如果有人能告诉我为什么这不起作用，我将非常感激。

由于

My dashboard

Answer 1

我解决了这个问题：

为了填充饼图，需要reduceSum。

var AddlGroup = AddlName.group().reduceSum(function (d) {return d["Week Ahead"]; 
});

这会将该组中的值相加。但是，由于每个组都有一个条目，因此它返回每行的单行值。

无法正确显示直流饼图

1 个答案: