chart.js - 使用 ChartJs 的多个堆积条形图

Question

我需要在 ChartJS 中使用一种方法在堆叠条形图中显示多条数据。在官方文档中，标签与堆栈的每个段有关，但我需要这些段是独立的。

我已经模拟了我需要实现的那种输出。我们每天有三个堆叠的条形图，每个条形显示一个单独的数据集。在每个数据集中，我们有一个段，它实际上是该条的子集。



不幸的是data里面的属性(property)dataset似乎不接受数组。这个图表可以使用 ChartJS 吗？

Answer 1

我在 ASP.Net/C# 中这样做:

我来自数据库的数据如下所示:

尺寸:“38 英寸”最小:80 标准:85 最大:90

创建模型

namespace YourNameSpace.Models
{
    public class Chart
    {
        public string[] labels { get; set; }
        public List<Datasets> datasets { get; set; }
    }

    public class Datasets
    {
        public string borderColor { get; set; }
        public bool fill { get; set; }
        public string label { get; set; }
        public string backgroundColor { get; set; }
        public string type { get; set; }
        public string borderWidth { get; set; }
        public int[] data { get; set; }
    }

    public class Configurations
    {
        public string Crops { get; set; }
        public int HP { get; set; }
        public string Pump { get; set; }
        public string TractorManufacture { get; set; }
        public string TractorModel { get; set; }
    }
 }

获取数据并从 Controller 加载模型。
我为条形图(最小值、标准、最大值)和一条线添加了 3 个系列 -
首先添加该行。
加载数据的技巧是它必须是一个整数数组，例如:DataMin.ToArray()。

List<string> LabelList = new List<string>();
foreach(ChartFromDB db in cdb)//ChartFromDB holds the structure mentioned above
{
    LabelList.Add(db.Size);
}

Chart _chart = new Chart();
_chart.labels = LabelList.ToArray();
_chart.datasets = new List<Datasets>();
List<Datasets> _dataSet = new List<Datasets>();

List<int> DataList = new List<int>();
List<int> DataMin = new List<int>();
List<int> DataStandard = new List<int>();
List<int> DataMax = new List<int>();

//line goes first
for (int y = 0; y < cdb.Count; y++)
{
    DataList.Add(conf.HP);
}
_dataSet.Add(new Datasets()
{
    type = "line",
    borderColor = "#FF6347",
    fill = false,
    label = "Your PTO-HP",
    data = DataList.ToArray(),
    backgroundColor = "#FF6347",
    borderWidth = "2"
});

for (int i=0;i< cdb.Count; i++)
{
    DataMax.Add(cdb[i].Maximum);
    DataStandard.Add(cdb[i].Standard);
    DataMin.Add(cdb[i].Minimum);
}

_dataSet.Add(new Datasets()
{
    type = "bar",
    fill = true,
    label = "Base - Minimum",
    data = DataMin.ToArray(),
    borderColor = "#FFE07C",
    backgroundColor = "#FFE07C",
    borderWidth = "1"
});

_dataSet.Add(new Datasets()
{
    type = "bar",
    fill = true,
    label = "Standard - Minimum",
    data = DataStandard.ToArray(),
    borderColor = "#E4A317",
    backgroundColor = "#E4A317",
    borderWidth = "1"
});

_dataSet.Add(new Datasets()
{
    type = "bar",
    fill = true,
    label = "High Performance - Minimum",
    data = DataMax.ToArray(),
    borderColor = "#AD9754",
    backgroundColor = "#AD9754",
    borderWidth = "1"
});

_chart.datasets = _dataSet;
return Json(_chart, JsonRequestBehavior.AllowGet);

在您的客户端上，对您的 Controller 进行 ajax/api 调用并将返回数据传递给某个函数并加载

function LoadCharts(data) {

        //the hi/low will allow you to dynamically adjust the upper/lower bound of the grid
        var hi = SomeMethodToGetTheUpperBoundForYourChart;
        var lo = SomeMethodToGetTheLowerBoundForYourChart;

        var ctx = document.getElementById('canvas').getContext('2d');
        var myBarChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
                title: {
                    display: true,
                    text: 'Some title for your graph'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: false
                    }],
                    yAxes: [
                        {
                            ticks: {                  
                                max: hi ,
                                min: lo,
                                stepSize: 10,
                                callback: function (value, index, values) {
                                    return value + " Some description for your value";
                                }
                            }
                        },
                        {
                        stacked: false                       
                        }, {
                            legend : {
                                display: false
                            }
                        }
                    ]
                },
                layout: {
                    padding: {
                        left: 10,
                        right: 10,
                        top: 0,
                        bottom: 0
                    }
                }
            }

        });
    }//LoadCharts

您将得到如下所示的内容:

ScreenShot