Chart.js 2.9.4 创建堆积条形图

本文链接：https://blog.csdn.net/allway2/article/details/125598882

这是一个使用 Chart.js 创建堆积条形图（有时称为堆积柱形图）的简单示例。

Chart.js 为设计人员和开发人员提供简单而灵活的 JavaScript 图表。

它允许您在 HTML 中创建所有类型的条形图、折线图、区域图和其他图表。它使用画布标准。虽然我更喜欢在 Web 上处理数据可视化时使用SVG，但 Chart.js 是一个流行的选项，因此值得一试。

从一个基本的开始index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>My Stacked Bar Chart</title>
  </head>
  <body>

  </body>
</html>

在正文中，我们需要一个<canvas>要绑定的元素。这是图表将出现的地方。

<canvas id="chart"></canvas>

我们将引入 Chart.js 库。

<script src="[https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js](https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js)"></script>

图表的其余部分将使用 JavaScript 编码。所以另一个<script>标签是必要的。

<script>
  // Chart code will go here.
</script>

我们首先需要一个对<canvas>我们之前编写的元素的引用。

var ctx = document.getElementById('chart');

我们将在这个元素上实例化一个新图表。第一个参数是绑定元素，第二个是我们图表的定义。该定义将具有三个属性：类型、数据和选项。

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {},
  options: {}
});

请注意，我们已经告诉 Chart.js 这将是一个bar类型图表。

在data属性中，我们将定义数据集及其标签。在我的示例中，我有三个数据集——都具有相同的标签。

data: {
  labels: ['Risk Level'],
  datasets: [
    { /* dataset one */ },
    { /* dataset two */ },
    { /* dataset three */ }
  ]
}

每个数据集都有一个标签、数据数组和背景颜色。在堆积条形图中，每个数据集将只有一个数据点。

datasets: [
  {
    label: 'Low',
    data: [67.8],
    backgroundColor: '#D6E9C6' // green
  },
  {
    label: 'Moderate',
    data: [20.7],
    backgroundColor: '#FAEBCC' // yellow
  },
  {
    label: 'High',
    data: [11.4],
    backgroundColor: '#EBCCD1' // red
  }
]

我们已经告诉 Chart.js 我们想要一个条形图，我们已经告诉它我们的数据，最后一步是告诉它这是应该堆叠的图表。我们在options物业中这样做。

options: {
  scales: {
    xAxes: [{ stacked: true }],
    yAxes: [{ stacked: true }]
  }
}

最终结果是堆积条形图。

这是

完整的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>My Stacked Bar Chart</title>
        <script src="Chart.min.js"></script>


    </head>
    <body>
        <canvas id="chart"></canvas>
        <canvas id="canvas18"></canvas>
        <script>
            var ctx = document.getElementById('chart');

            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['张三', '李四'],
                    datasets: [
                        {
                            label: '语文',
                            data: [94.5, 89.6],
                            backgroundColor: '#D6E9C6',
                        },
                        {
                            label: '数学',
                            data: [84.2, 93.5],
                            backgroundColor: '#FAEBCC',
                        },
                        {
                            label: '英语',
                            data: [88.4, 87.8],
                            backgroundColor: '#EBCCD1',
                        }
                    ]
                },
                options: {
                    scales: {
                        xAxes: [{stacked: true}],
                        yAxes: [{stacked: true}]
                    }
                }
            });


            var ctx18 = document.getElementById('canvas18').getContext('2d');
            window.myBar = new Chart(ctx18, {
                type: 'bar',
                data: {
                    labels: ["2021-07", "2021-08", "2021-09", "2021-10", "2021-11", "2021-12", "2022-01", "2022-02", "2022-03", "2022-04", "2022-05", "2022-06", "2022-07"],
                    datasets: [{
                            label: '连接时间（毫秒）',
                            backgroundColor: 'rgb(255, 99, 132)',
                            borderColor: 'rgb(255, 99, 132)',
                            borderWidth: 1,
                            data: ["318", "324", "330", "349", "360", "368", "376", "382", "389", "395", "398", "402", "403"]
                        },
                        {
                            label: '读取时间（毫秒）',
                            backgroundColor: 'rgb(54, 162, 235)',
                            borderColor: 'rgb(54, 162, 235)',
                            borderWidth: 1,
                            data: ["436", "439", "463", "470", "538", "540", "540", "541", "633", "633", "633", "634", "634"]
                        }]

                },
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: '系统1'
                    },
                    scales: {
                        xAxes: [{stacked: true}],
                        yAxes: [{stacked: true}, {
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                    }


                }
            });
        </script>

    </body>
</html>