Chartjs:制作正方形图例

基础概念

Chart.js 是一个基于 HTML5 Canvas 的 JavaScript 图表库，用于创建各种类型的图表，如折线图、柱状图、饼图等。Chart.js 提供了丰富的配置选项和插件系统，使得开发者可以轻松地定制图表的外观和行为。

类型

Chart.js 支持多种类型的图表，包括但不限于：

折线图（Line Chart）
柱状图（Bar Chart）
饼图（Pie Chart）
环形图（Doughnut Chart）
散点图（Scatter Chart）
极地区域图（Polar Area Chart）
雷达图（Radar Chart）

应用场景

Chart.js 可以应用于各种需要数据可视化的场景，例如：

数据报告和分析
仪表盘和监控系统
电子商务网站的销售数据分析
教育和科研领域的数据展示

制作正方形图例

要在 Chart.js 中制作正方形图例，可以通过自定义图例的样式来实现。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js Square Legend Example</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .chartjs-legend {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .chartjs-legend-item {
            display: flex;
            align-items: center;
            margin: 5px;
        }
        .chartjs-legend-item-text {
            margin-left: 5px;
        }
        .chartjs-legend-item-box {
            width: 20px;
            height: 20px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <canvas id="myChart"></canvas>
    <div class="chartjs-legend" id="legend"></div>

    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                legend: {
                    display: false
                }
            }
        });

        const legendItems = myChart.options.plugins.legend.labels.generateLabels(myChart);
        const legendList = document.getElementById('legend');
        legendItems.forEach((item) => {
            const div = document.createElement('div');
            div.className = 'chartjs-legend-item';
            const box = document.createElement('span');
            box.className = 'chartjs-legend-item-box';
            box.style.backgroundColor = item.fillStyle;
            div.appendChild(box);
            const text = document.createElement('span');
            text.className = 'chartjs-legend-item-text';
            text.textContent = item.text;
            div.appendChild(text);
            legendList.appendChild(div);
        });
    </script>
</body>
</html>

解释

HTML 结构：创建一个 canvas 元素用于绘制图表，并创建一个 div 元素用于显示自定义图例。
CSS 样式：通过 CSS 自定义图例的样式，使其显示为正方形。
JavaScript 代码：
- 使用 Chart.js 创建一个柱状图。
- 通过 myChart.options.plugins.legend.labels.generateLabels(myChart) 生成图例项。
- 遍历生成的图例项，创建对应的 HTML 元素并添加到图例容器中。

参考链接

通过以上步骤，你可以轻松地在 Chart.js 中制作正方形图例。

页面内容是否对你有帮助？

有帮助

没帮助

Chartjs:制作正方形图例

、、、

使用react-chartjs-2创建条形图，如下所示。我试图使图例的方形形状，而不是默认的矩形。我应用了boxWidth: 10，如下所示，但它不起作用，有没有其他可能的替代方案来生成正方形图例 const sample_data = { labels: ['Item1', 'Item2'],

浏览 32提问于2021-02-11得票数 1

回答已采纳

1回答

是否可以在chartjs中将多个图表组合到一个画布中？

、

我是chart.js的新手，我想在一个画布中实现多个图表(每个图表包含一个数据系列)，它们共享相同的xAxis，并共享相同的工具提示(就像highcharts tooltip.shared一样)，如下所示： |-----------------|| chart1 ||-----------------|| chart2 ||-----------------| |

浏览 40提问于2021-04-09得票数 0

6回答

Chart.js:通过单击图例隐藏系列

、、

我正在开发一个使用chart.js (www.chartjs.org)的网站。我必须制作一个折线图来显示多个数据序列，用户可以通过单击相应的图例符号(类似于此)来隐藏或显示这些数据。有没有办法用chartjs做到这一点？

浏览 2提问于2015-01-22得票数 8

2回答

ChartJS不会绘制图表

、、、

实际上，我已经尝试了几天使用ChartJS库将数据从ajax加载到图表中，但问题是另一个div中的图例被加载了，来自ajax的数据被正确加载，但是当画布被创建时，图表就像是“不可见的”。现在我只是想用json数组中的静态数据创建一个简单的图表，但是我仍然有同样的问题，图例显示了，但图表没有显示。问题可能应该是在类型中我得到了“类型未定义”？如果是这样，我怎么能修复它呢？

浏览 22提问于2019-02-07得票数 0

回答已采纳

2回答

用Chartjs显示混合类型的传奇(条形和线条)

我使用Chartjs和一行数据集混合制作了一个堆叠成的组条形图：我想通过将第一项Productivité呈现为一行(而不是显示的矩形)来区分它的图例。

浏览 1提问于2018-02-12得票数 4

回答已采纳

1回答

Chartjs -将图例更改为带有圆点的直线？

、、、

3 } } Chartjs-将图例更改为带有圆点的直线？使用chartjs的最新cdn时，如何设置图例的样式

浏览 2提问于2021-04-09得票数 0

1回答

如何用Chartjs包装图例文本？

、、、

当文本太长时，我的ChartJs图例文本会在同一行中溢出。是否有任何参数可用于启用文本包装。在ChartJS中有这样的选项吗？itemStyle: { },我试过使用legendCallback，但在这种情况下，我将丢失ChartJS中从框中取出的图例框的“onclick”有用功能。也不想使用图例模板。

浏览 3提问于2016-11-24得票数 8

1回答

我想在React图表中更改标签的位置和样式

、、

我正在使用react-chartjs-2。我想在图表下面显示标签的位置。另外，标签的形状目前是方形的，但我想将其更改为圆形。/styles.css";import { Bar } from "react-chartjs-2"; {

浏览 10提问于2021-11-18得票数 0

2回答

图表js，甜甜圈图没有正确地呈现提示

、、、

我有一个多层次的甜甜圈图，但是它没有正确的渲染--这是代码--问题是，在所有绿色的部分上，它说物体，在所有灰色的部分，我想要的解决方案是，在外环上，应该是产品，中间的物体，内部最里面的应该是材料，灰色区域应该只显示数字。下面是问题代码的：var ap=99; var ctx = new Chart(myChart, { labels: ['Objects', 'Products', '

浏览 5提问于2021-05-24得票数 1

回答已采纳

1回答

如何在Chart.js中创建图表和图例之间的间距

、

我想在Chart.js中创建图形和图例之间的间距。如果你能帮助我，我将不胜感激。代码如下。}, } } } </script> ChartBox.js import { Bar } from 'vue-chartjs

浏览 36提问于2021-02-04得票数 1

1回答

如何将Chart.js图例矩形更改为正方形

我正在使用Chart.js库创建图表，一切都很好，但是我的客户希望在图例中有正方形，而不是矩形(我知道这是一件小事，但客户机是王者)。当然，我可以用一些HTML和CSS来制作我自己的图例，但我更愿意继续使用库作为我的图表。我希望有人能解决这个问题。

浏览 0提问于2018-05-11得票数 1

回答已采纳

1回答

默认情况下，Vue chartjs禁用数据集

、、、

我正在尝试用chart.js制作一张当前捐款情况的图表。我使用Vue作为前端，vue-chartjs作为图表。只有一个问题。当我打开页面时，数据集不可见。那么我该如何解决这个问题呢？C7031F', }}import { Bar, mixins } from 'vue-chartjs{ maintainAspectRati

浏览 11提问于2018-02-11得票数 2

回答已采纳

4回答

使用Core Graphics或包含pngs绘制正方形？

、、、

我正在为一个图表制作一个图例，它基本上看起来就像这样：[ ] Line 2左边的方框需要与图表上的线条颜色相同。无论如何，我需要知道的是，是用Core Graphics更快地绘制方框，还是只用GIMP为正方形制作一些pngs并包含它们。

浏览 0提问于2011-07-26得票数 1

回答已采纳

1回答

Chart js最大图例数

、、、

我想知道如何确定图例的最大数量。

浏览 2提问于2016-04-26得票数 1

1回答

ChartJS区分图表区、数据集和图例的点击

、

我有一个通过'npm react- ChartJS -2‘使用chartjs的react应用程序。我正在使用Line图表，我有以下要求：2-检测点击顶部的图例矩形以隐藏/显示数据集(当前默认行为) 我试过使用options.onClick，但它似乎覆盖了图例点击。我也尝试过getElementAtEvent，它会返回被点击的数据集，但是当点击图例/图表区域时，它显示为空。getData

浏览 2提问于2018-11-25得票数 0

1回答

Chart.js v3:如何在我的图表中增加图例的字号？

、、

图例的字体大小不能更改。ajax/libs/Chart.js/3.4.0/chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.min.js"><

浏览 23提问于2021-07-02得票数 0

回答已采纳

1回答