Question

我想自定义行数据的图例，以便图例图形是一条线（样式与实际数据行相似）而不是一个框。

据我所知from the source，图形可以是一个点或一个框，框的高度固定为字体大小。 'generateLabels'选项似乎不允许扩展这些约束。

版本2.2.1。

感谢您的帮助。

Answer 1

此解决方案仅在您拥有Chart.js的本地版本时才有效，因为它需要编辑库的源代码中的函数，如果您从CDN导入它，则无法完成。

要实现您的目标，您需要修改drawLegendBox功能（ link to source here ）。

首先，好像你想要做一个pointStyle图例，添加useLineStyle并将其设置为true，如下所示：

options: {
    legend: {
        labels : {
            useLineStyle: true
        }
    }
}

然后你需要转到本地版本的Chart.js（ obvisouly，如果你从CDN 导入它就无法编辑它）并搜索函数drawLegendBox（在Chart.js v2.2.1，大致是第6460行。

向下滚动一下，看看是这样的：

if (opts.labels && opts.labels.usePointStyle) {
    // Recalulate x and y for drawPoint() because its expecting
    // x and y to be center of figure (instead of top left)
    var radius = fontSize * Math.SQRT2 / 2;
    var offSet = radius / Math.SQRT2;
    var centerX = x + offSet;
    var centerY = y + offSet;

    // Draw pointStyle as legend symbol
    Chart.canvasHelpers.drawPoint(ctx, legendItem.pointStyle, radius, centerX, centerY);
}
// --- NEW CONDITION GOES HERE ---
else {
    // Draw box as legend symbol
    ctx.strokeRect(x, y, boxWidth, fontSize);
    ctx.fillRect(x, y, boxWidth, fontSize);
}

并在两个条件之间添加：

else if (opts.labels && opts.labels.useLineStyle) {
    ctx.strokeRect(x, y + fontSize / 2, boxWidth, 0);
}

通过此编辑，每次将useLineStyle设置为true时，图例框将被绘制为线条，如下面的屏幕截图所示：

Answer 2

我能够在数据集中使用pointStyle：line，然后在选项下使用标签：{usePointStyle: true,}，

Answer 3

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

（围绕第16289行的图表2.7.2）：

            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
            }

Answer 4

在数据集下：pointStyle：'line' 然后在图例下：标签：usePointStyle：true

Chart.js中折线图的图例

4 个答案:

此解决方案仅在您拥有Chart.js的本地版本时才有效，因为它需要编辑库的源代码中的函数，如果您从CDN导入它，则无法完成。