Question

我正在尝试使用Chart.js条形图来显示一组数据。我的数据是每周一次的，所以根据我的方法，我发送年份和周，并将数据返回3列;产品，面积和金额。

我想要的是产品水平和每个产品我想要每个区域的不同的条和当然的数量verticaly。（奖励：如果该产品中没有区域，则不应该在该特定产品中显示）

问题是产品数量和面积数量可能因每周而异。而且我似乎无法找到一种循环数据并以chart.js想要的方式创建数据集的好方法。

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

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

同样对其他Chart插件开放，但非常喜欢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设置为透明值（例如strokeColor: "rgba(0, 0, 0, 0)",行下方的fillColor）并将barStrokeWidth选项设置为0，以便0值' t在图表上显示（否则将显示细线）

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

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

1 个答案: