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

Question

我正在尝试使用Chart.js条形图显示一组数据。 我的数据是每周的，所以按照我的方法，我发送年份和星期，并以 3 列返回数据；产品、面积和数量。

我想要的是水平显示产品，在每个产品中，我希望每个区域都有不同的栏，并垂直显示金额。 (奖励:如果某个区域在该产品中没有任何内容，则不应在该特定产品中显示)

问题是每周的产品数量和区域数量可能有所不同。我似乎找不到一种好方法来循环数据并按照 Chart.js 想要的方式创建数据集。

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

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

也对其他图表插件开放，但非常喜欢 Chart.js 如何对数据进行动画处理。如果我能做到这一点，我可能会想出当你改变星期时的更新方法。

要获取标签，我可以执行以下操作:

$.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;
})

并使用它来显示图表。

---

fiddle - http://jsfiddle.net/jt4Lqkn3/

---

(Bonus: If an Area nothing in that product it should not be shown in that particular Product)

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

但是，您可能希望将描边颜色设置为透明值(例如，描边颜色:“rgba(0, 0, 0, 0)”，位于fillColor下方line)并将 barStrokeWidth 选项设置为 0，这样 0 值就不会显示在图表上(否则会显示细线)

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