javascript - Chart.js 向 X 轴和 Y 轴添加方向箭头

Question

我正在尝试向图表的轴添加/绘制箭头。 (所以他们看起来更像 that )

我试图查看该文档，但我没有在比例部分找到任何有关的选项。我试图通过使用注释插件来做到这一点，但它 fall short就像在条形图上一样，箭头似乎限制在 x 轴上，我没有找到让它溢出的方法。

我发现有人有类似的问题，但它在 older version of the library 上

我需要做一个自定义量表类(class)吗？

这是我当前的测试实现

const data = {
  labels: ["Label1","Label2","Label3","Label4"],
  datasets: [{
    label: 'First Dataset',
    data: [1349,282,274,173],
    backgroundColor: ["blue"],
  }]
};
const annotation1 = {
    type: 'line',
    borderColor: "red",
    borderWidth: 3,
    arrowHeads: {
        end: {
            enabled: true,
            // borderColor: 'green'
        }
    },
    scaleID: 'y',
    value: 0

};
const annotation2 = {
    type: 'line',
    borderColor: "red",
    borderWidth: 3,
    arrowHeads: {
        end: {
            enabled: true,
        }
    },
    xMax: 0,
    xMin: 0,
    xScaleID: 'x',
    yMax: 1500,
    yMin: 0,
    yScaleID: 'y'
};
const ctx= document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        padding: 10,
        scales: {
            x: {
                grid: {
                    display: false,
                    borderColor:  "red",
                    borderWidth: 3,
                    z:4,
                },
                grace: '10%'
            },
            y: {
                grid: {
                    display: false,
                    borderColor:  "red",
                    borderWidth: 3,
                    padding: 100,

                },
                ticks: {
                    display: false,
                    padding: 100,
                },
                grace: '10%',
                padding: 100,
            },
        },
        plugins: {
            legend: {
                display: false,
            },
            tooltip: {
                enabled: false,
            },
            datalabels: {
                labels: {
                    value: {
                        align: 'end',
                        anchor: 'end',
                        color: "black",
                        formatter: function (value, ctx) {
                            return value;
                        },

                    },
                }
            },
            annotation: {
                drawTime: 'beforeDraw',
                annotations: {
                    annotation1,
                    annotation2
                }
            },
        }
    },
    plugins: [ChartDataLabels],
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>

<canvas id="myChart" ></canvas>

Answer 1

好的，我确实找到了一种方法，通过使用 this video 的一些内容.

在这里，当我重做上一个例子，并添加一个插件“customBorder”

const data = {
  labels: ["Label1", "Label2", "Label3", "Label4"],
  datasets: [{
    label: 'First Dataset',
    data: [1349, 282, 274, 173],
    backgroundColor: ["blue"],
  }]
};
const customBorder = {
  id: 'customBorder',
  afterDatasetsDraw(chart, args, pluginOptions) {
    const {
      ctx,
      chartArea: {
        top,
        bottom,
        left,
        right,
        width,
        height
      }
    } = chart;


    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 3;
    ctx.strokeStyle = "red";

    ctx.moveTo(left - 1, top + 3);
    ctx.lineTo(left + 5, top + 10);
    ctx.moveTo(left + 1, top + 3);
    ctx.lineTo(left - 5, top + 10);
    ctx.moveTo(left, top + 5);
    ctx.lineTo(left, bottom);
    ctx.lineTo(right - 5, bottom);
    ctx.moveTo(right - 3, bottom + 1)
    ctx.lineTo(right - 10, bottom - 5);
    ctx.moveTo(right - 3, bottom - 1);
    ctx.lineTo(right - 10, bottom + 5);
    ctx.stroke();
    ctx.closePath();
  }
}
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      x: {
        grid: {
          drawBorder: false,
          display: false,
        },
        grace: '15%'
      },
      y: {
        grid: {
          drawBorder: false,
          display: false,
        },
        ticks: {
          display: false,
        },
        grace: '15%',
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: false,
      },
      datalabels: {
        labels: {
          value: {
            align: 'end',
            anchor: 'end',
            color: "black",
            formatter: function(value, ctx) {
              return value;
            },

          },
        }
      },
    }
  },
  plugins: [ChartDataLabels, customBorder],
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0/dist/chartjs-plugin-datalabels.min.js"></script>
</script>

<canvas id="myChart"></canvas>

我认为这不是最好的方法，但它确实有效。