时间戳

首页 > 解决方案 > chartjs-plugin-annotation 不会画任何东西

chart.js - chartjs-plugin-annotation 不会画任何东西

问题描述

我有一个 chartjs 折线图设置，我试图在图表上以固定值绘制水平注释线。但是没有任何反应，控制台中也没有错误。

我已经包含了 chartjs-plugin-annotation.js，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>

然后将options:其添加到（应该在图表上添加一条 2px 粗线作为值“25”）：

            annotation: {
                drawTime: 'afterDraw',
                annotations: [{
                    type: 'line',
                    id: 'line',
                    mode: 'horizontal',
                    scaleID: 'y-axis-0',
                    value: 25,
                    borderWidth: 2,
                    borderColor: 'black'
                }]
            },

图表的完整代码在这里：

    var temperaturechart = new Chart($('#temperaturechart'), {
        type: 'line',
        data: {
            datasets: [{
                label: 'Temperature',
                backgroundColor: 'rgba(252, 132, 3, 0.1)',
                borderColor: 'rgba(252, 132, 3, 1)',
                data: [{"x":"2020-05-21 14:00:00","y":27.28},{"x":"2020-05-21 16:00:00","y":28.64},{"x":"2020-05-21 18:00:00","y":29.83},{"x":"2020-05-21 20:00:00","y":20.24},{"x":"2020-05-21 22:00:00","y":21.63},{"x":"2020-05-22 00:00:00","y":30.34},{"x":"2020-05-22 02:00:00","y":19.01},{"x":"2020-05-22 04:00:00","y":18.88}],
            }]
        },
        options: {
            annotation: {
                drawTime: 'afterDraw',
                annotations: [{
                    type: 'line',
                    id: 'line',
                    mode: 'horizontal',
                    scaleID: 'y-axis-0',
                    value: 25,
                    borderWidth: 2,
                    borderColor: 'black'
                }]
            },
            aspectRatio: 2.5,
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'day',
                        unitStepSize: 1,
                        displayFormats: {
                            'day': 'MMM DD'
                        }
                    },
                    scaleLabel: {
                        display: false,
                        labelString: 'Date'
                    },
                    gridLines: {
                        tickMarkLength: 8,
                        zeroLineColor: 'rgba(0, 0, 0, 0.1)'
                    },
                    ticks: {
                        maxRotation: 90,
                        minRotation: 45,
                        padding: 10
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Temperature'
                    }
                }]
            },

        }
    });

标签： chart.js

解决方案

我犯了一个愚蠢的错误，即同时包含 Chart.min.js，然后又包含 Chart.bundle.min.js。

所以是这样的：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>

...other code...


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>

稍后删除 Chart.bundle.min.js 解决了这个问题。

推荐阅读