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

Question

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

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

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

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

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

也对其他图表插件开放，但真的很喜欢 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;
})

并用它来显示图表。

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

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

您不能更改任何配置来执行此操作 - 每个系列都会有一个 space。

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

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

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

Chart.js Bar Chart - grouping and mapping data

javascript

jquery

bar-chart

underscore.js

chart.js