Chart.js中折线图的图例

我想为线条数据定制一个图例，以便图例图形是一条线条（样式类似于实际数据线），而不是一个方框

据我所知，图形可以是点或框，框的高度固定在字体大小上。“generateLabels”选项似乎不允许围绕这些违禁品展开

版本2.2.1

感谢您的帮助。

注意：此解决方案仅在您有本地版本的Chart.js时有效，因为它需要在库的源代码中编辑函数，如果您从CDN导入函数，则无法完成此操作。 要实现所需功能，需要编辑

drawLegendBox

函数（）

首先，如果要创建点样式图例，请添加

useLineStyle

，并将其设置为

true

，如下所示：

选项：{
图例：{
标签：{
useLineStyle:true
}
}
}

然后，您需要转到本地版本的Chart.js（显然，如果您从CDN导入它，则无法对其进行编辑），并搜索函数

drawLegendBox

（在Chart.js v2.2.1上，它大约是第6460行；在Chart.js v2.9.4中，搜索

labelOpts&&labelOpts.usePointStyle

）

向下滚动一点，可以看到如下内容：

if（opts.labels&&opts.labels.usePointStyle）{
//为drawPoint（）重新计算x和y，因为它需要
//x和y是图形的中心（而不是左上角）
var radius=fontSize*Math.SQRT2/2；
变量偏移=半径/Math.SQRT2；
var centerX=x+偏移量；
var centerY=y+偏移量；
//绘制点样式作为图例符号
图表.画布助手.绘图点（ctx，legendItem.pointStyle，radius，centerX，centerY）；
}
//---这里有新情况---
否则{
//绘制框作为图例符号
ctx.strokeRect（x、y、箱宽、字体大小）；
ctx.fillRect（x，y，boxWidth，fontSize）；
}

并将其添加到两个条件之间：

else if（opts.labels&&opts.labels.useLineStyle）{
ctx.beginPath（）；
ctx.moveTo（x，y+fontSize*0.45）；
ctx.lineTo（x+盒宽，y+字体大小*0.45）；
ctx.stroke（）；
}

通过此编辑，每次将

useLineStyle

设置为true时，图例框将绘制为直线，如以下屏幕截图所示：

---

我能够在数据集中使用pointStyle:

行

，然后在选项下使用标签：

{usePointStyle:true，}

，

只是为了改进tektiv的解决方案。 如果您想显示一条虚线，请在同一位置使用此代码

（16289线周围的图表JS 2.7.2）：

---

谢谢Tektiv。我想把这个打开看看是否有一种方法可以不占用图书馆。感谢您的回答。如果您无法编辑源代码，是否有办法做到这一点？我已经在angular应用程序中通过npm安装了chartjs，这个答案虽然很好，但对我来说不是一个选项。@Dave我已经有一段时间没有使用Chart.js了，尽管我认为现在仍然有办法做到这一点，而无需深入挖掘源代码。您可以在服务器上托管自己版本的Chart.js，然后像使用npmt2.7.1版一样导入它。在2.7.1版中仍然没有选项，但tektiv的代码仍然有效。谢谢。这正是我想要的，非常感谢！我不知道为什么这很难找到这是可行的，但现在点不再显示为圆圈…这是正确的答案伙计们，谢谢伙计们

            if (opts.labels && opts.labels.usePointStyle) {
                // CHARTJS CODE
            } else if (opts.labels && opts.labels.useLineStyle) {
                if (legendItem.borderDash) {
                    ctx.setLineDash(legendItem.borderDash);
                }
                ctx.beginPath();
                ctx.moveTo(x, y + fontSize / 2);
                ctx.lineTo(x + boxWidth, y + fontSize / 2);
                ctx.stroke();
            } else {
                // CHARTJS CODE
            }