Chart.js 条形图 - 分组和映射数据

Question

我正在尝试使用Chart.js 条形图来显示一组数据。 我的数据是基于每周的，所以根据我的方法，我发送年份和周数，然后将数据分 3 列取回；产品、面积和数量。

我想要的是水平的产品，并且在每个产品中，我希望每个区域都有不同的条形，并且垂直偏离数量。 （奖励：如果某个区域在该产品中没有任何内容，则不应在该特定产品中显示）

问题在于每周的产品数量和区域数量可能会有所不同。而且我似乎找不到一个好方法来循环遍历数据并按照 chart.js 想要的方式创建数据集。

还尝试使用 Underscore.js 对其进行分组，但每个区域并不总是有特定产品的数量这一事实似乎导致了一些问题。

所以我猜你必须遍历数据并将该数据映射到每个区域的另一个预定义数组，以便它可以以某种方式匹配这个结构？？

也对其他图表插件开放，但真的很喜欢 Chart.js 动画数据的方式。如果我得到这个工作，我可能会在你改变周时找出一个更新方法。

要获得标签，我可以 f.ex 这样做：

$.ajax({
    ....
    success: function (d) {
          var a = _.groupBy(d.data, function (d) { return d.Product });
          var labels = [];
          $.each(a, function (i, value) {
             labels.push(i);
          });
    }
});

Answer 1

使用这种格式的数据

var myJSONData = [
    {
        Product: 'P1',
        Area: 'A1',
        Value: 12
    },
    ...
]

您可以使用此函数将其转换为 Chart.js 所需的格式

var data = {
    labels: [],
    datasets: []
}

var colors = ['Red','Blue','Green', ...]  // add as many colors as there will be areas (maximum)

myJSONData.forEach(function (e) {
    // create labels
    var labelIndex = data.labels.indexOf(e.Product)
    if (labelIndex === -1) {
        labelIndex = data.labels.length;
        data.labels.push(e.Product);
        // dummy entries for each dataset for the label
        data.datasets.forEach(function (dataset) {
            dataset.data.push(0)
        })
    }

    // get the area dataset
    var area = data.datasets.filter(function(area){
        return (area.label === e.Area);
    })[0]
    // otherwise create it
    if (area === undefined) {
        area = {
            label: e.Area,
            // create a dummy array with an entry for each of the existing labels
            data: data.labels.map(function () {
                return 0;
            }),
            fillColor: colors[data.datasets.length]
        };
        data.datasets.push(area)
    }

    // set the value
    area.data[labelIndex] = e.Value;
})

并用它来显示图表。

---

小提琴 - http://jsfiddle.net/jt4Lqkn3/

---

（奖励：如果该产品中没有任何区域，则不应显示 该特定产品）

您无法更改任何配置来执行此操作 - 每个系列都会有一个空间。

但是您可能希望将 strokeColor 设置为透明值（例如，fillColor 行下方的strokeColor: "rgba(0, 0, 0, 0)",）并将barStrokeWidth 选项设置为 0，这样 0 值就不会显示在图表（否则会显示细线）

new Chart(ctx).Bar(data, {
    barStrokeWidth: 0,
});