如何在我的图表中插入缺失值?

时间:2015-10-05 10:27:34

标签: javascript html d3.js svg dimple.js

我使用了这段代码(JSFiddle:http://jsfiddle.net/0zvq3gr7/):

        var data = [
                    { Date: "2015-09-14", DayOfMonth: 14, Type: "Views", Amount: 5, y1: 10, },
                    { Date: "2015-09-14", DayOfMonth: 14, Type: "Likes", Amount: 2, y1: 15, },
                    { Date: "2015-09-15", DayOfMonth: 15, Type: "Views", Amount: 10, y1: 35, },
                  //  { Date: "2015-09-15", DayOfMonth: 15, Type: "Likes", Amount: 4, y1: 20, },

                    { Date: "2015-09-16", DayOfMonth: 16, Type: "Views", Amount: 14, y1: 22, },
                    { Date: "2015-09-16", DayOfMonth: 16, Type: "Likes", Amount: 10, y1: 22, },
                    { Date: "2015-09-17", DayOfMonth: 27, Type: "Views", Amount: 20, y1: 22, },
                    { Date: "2015-09-17", DayOfMonth: 27, Type: "Likes", Amount: 12, y1: 22, },
                ];

var svgWidth = $("#chart").width(),
    svgHeight = $("#chart").height();

var svg = dimple.newSvg("#chart", svgWidth, svgHeight);
var chart = new dimple.chart(svg, data);
var xAxis = chart.addCategoryAxis("x", "DayOfMonth");
xAxis.title = null;
xAxis.addOrderRule("Date");
var yAxis = chart.addMeasureAxis("y", "Amount");
yAxis.title = null;

var series = chart.addSeries("Type", dimple.plot.area);
series.stacked = false;
//series.interpolation = "cardinal";


var legend = chart.addLegend(0, 20, 300, 20, "right");

chart.draw();

结果如下:

enter image description here

在上一个例子中,我删除了:

{ Date: "2015-09-15", DayOfMonth: 15, Type: "Likes", Amount: 4, y1: 20, }

来自数据。因为对于“喜欢”类型DayOfMonth 15缺失,所以在DayOfMonth 14和16之间应该有一条“Likes”的直线。我在下图中绘制了这个:

enter image description here

如何在此处修复错误的插值?

1 个答案:

答案 0 :(得分:0)

DayOfMonth 15有两个对象。如果你删除它们,它将在14和16之间绘制一条直线。看看这个updated fiddle

    var data = [
                { Date: "2015-09-14", DayOfMonth: 14, Type: "Views", Amount: 5, y1: 10, },
                { Date: "2015-09-14", DayOfMonth: 14, Type: "Likes", Amount: 2, y1: 15, },
               // { Date: "2015-09-15", DayOfMonth: 15, Type: "Views", Amount: 10, y1: 35, },
              //  { Date: "2015-09-15", DayOfMonth: 15, Type: "Likes", Amount: 4, y1: 20, },
                { Date: "2015-09-16", DayOfMonth: 16, Type: "Views", Amount: 14, y1: 22, },
                { Date: "2015-09-16", DayOfMonth: 16, Type: "Likes", Amount: 10, y1: 22, },
                { Date: "2015-09-17", DayOfMonth: 27, Type: "Views", Amount: 20, y1: 22, },
                { Date: "2015-09-17", DayOfMonth: 27, Type: "Likes", Amount: 12, y1: 22, },
            ];