如何使用dimple.js图表​​显式设置类别值？

Question

我想画一张总是在x轴上显示M，T，W，Th，F，Sa，Su的图表。

我从：

开始

var x = myChart.addCategoryAxis("x", "Day");
x.addOrderRule(["M", "T", "W", "Th", "F", "Sa", "Su"]);

但这不会强迫这些价值存在;如果我的数据只有“W”和“F”，我只会在x轴上得到两个项目。

但是，即使数据没有某些值的示例，我也希望所有7。

有没有办法实现这个目标？

我也发布了这个问题，但在SO上可能更合适： https://github.com/PMSI-AlignAlytics/dimple/issues/103

Answer 1

您只需确保这些值出现在您的数据中。这是一个例子：

var xValues = ["M", "T", "W", "Th", "F", "Sa", "Su"];
    svg = dimple.newSvg("#chartContainer", 600, 400),
    data = [
      { "cat": "W", "val": 123456789 },
      { "cat": "F", "val": 234567890 }
    ],
    c = new dimple.chart(svg, data),
    x = c.addCategoryAxis("x", "cat"),
    y = c.addMeasureAxis("y", "val"),
    s = c.addSeries(null, dimple.plot.bar);

// Append a row with no value for each x category you want
xValues.forEach(function (d) {
    data.push({"cat": d})
}, this);

// Set the ordering as you did before
x.addOrderRule(xValues);

c.draw();

http://jsbin.com/hosobo/7/edit?js,output