Chart.js 当x轴为时间类型时，Chartjs不显示注释_Chart.js

Chart.js 当x轴为时间类型时，Chartjs不显示注释

chart.js

Chart.js 当x轴为时间类型时，Chartjs不显示注释,chart.js,Chart.js,我试着在我的时间线图中添加一些垂直的红线。对于具有类别的正常图表，是works，但不适用于时间轴 <!doctype html> <html> <head> <title>Line Chart</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></s

我试着在我的时间线图中添加一些垂直的红线。对于具有类别的正常图表，是works，但不适用于时间轴

<!doctype html>
<html>

<head>
    <title>Line Chart</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
<div style="width:75%;">
    <canvas id="canvas"/>
</div>
<script>
    var timeFormat = 'DD/MM/YYYY';

    var config = {
        type: 'line',
        data: {
            datasets: [
                {
                    label: "line1",
                    data: [
                        {x: "2015-03-15T13:03:00Z", y: 3000},
                        {x: "2015-03-16T13:03:00Z", y: 3100},
                        {x: "2015-03-17T13:03:00Z", y: 2900},
                        {x: "2015-03-18T13:03:00Z", y: 3050}
                    ],
                    fill: false,
                    borderColor: 'black'
                },
                {
                    label: "line2",
                    data: [
                        {x: "2015-03-15T13:03:00Z", y: 4000},
                        {x: "2015-03-16T13:03:00Z", y: 4100},
                        {x: "2015-03-17T13:03:00Z", y: 4900},
                        {x: "2015-03-18T13:03:00Z", y: 4050}
                    ],
                    fill: false,
                    borderColor: 'green'
                }
            ]
        },
        options: {
            responsive: true,
            title: {
                display: true,
                text: "Chart.js Time Scale"
            },
            scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        tooltipFormat: 'll'
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Date'
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'value'
                    }
                }]
            },
            annotation: {
                drawTime: 'afterDatasetsDraw',
                annotations: [{
                    type: 'line',
                    mode: 'vertical',
                    scaleID: 'x-axis-0',
                    value: '2015-03-17T13:03:00Z',
                    borderColor: 'red',
                    borderWidth: 1,
                    label: {
                        enabled: true,
                        position: "top",
                        content: "somelabel"
                    }
                }]
            }
        }
    };

    window.onload = function () {
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx, config);
    };

</script>
</body>
</html>


折线图
帆布{
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
}
var timeFormat='DD/MM/YYYY'；
变量配置={
键入：“行”，
数据：{
数据集：[
{
标签：“line1”，
数据：[
{x:“2015-03-15T13:03:00Z”，y:3000}，
{x:“2015-03-16T13:03:00Z”，y:3100}，
{x:“2015-03-17T13:03:00Z”，y:2900}，
{x:“2015-03-18T13:03:00Z”，y:3050}
],
填充：假，
边框颜色：“黑色”
},
{
标签：“line2”，
数据：[
{x:“2015-03-15T13:03:00Z”，y:4000}，
{x:“2015-03-16T13:03:00Z”，y:4100}，
{x:“2015-03-17T13:03:00Z”，y:4900}，
{x:“2015-03-18T13:03:00Z”，y:4050}
],
填充：假，
边框颜色：“绿色”
}
]
},
选项：{
回答：是的，
标题：{
显示：对，
文本：“Chart.js时间刻度”
},
比例：{
xAxes：[{
键入：“时间”，
时间：{
tooltipFormat:'ll'
},
scaleLabel：{
显示：对，
标签字符串：“日期”
}
}],
雅克斯：[{
scaleLabel：{
显示：对，
标签字符串：“值”
}
}]
},
注释：{
drawTime:“afterDatasetsDraw”，
注释：[{
键入：“行”，
模式：“垂直”，
scaleID:'x轴-0'，
值：“2015-03-17T13:03:00Z”，
边框颜色：“红色”，
边框宽度：1，
标签：{
启用：对，
位置：“顶部”，
内容：“somelabel”
}
}]
}
}
};
window.onload=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myLine=新图表（ctx，配置）；
};

它起作用了，您只是忘记了将脚本标记包含到插件中，这样就不会加载注释插件

var timeFormat='DD/MM/YYYY'；
变量配置={
键入：“行”，
数据：{
数据集：[{
标签：“line1”，
数据：[{
x:“2015-03-15T13:03:00Z”，
y:3000
},
{
x:“2015-03-16T13:03:00Z”，
y:3100
},
{
x:“2015-03-17T13:03:00Z”，
y:2900
},
{
x:“2015-03-18T13:03:00Z”，
y:3050
}
],
填充：假，
边框颜色：“黑色”
},
{
标签：“line2”，
数据：[{
x:“2015-03-15T13:03:00Z”，
y:4000
},
{
x:“2015-03-16T13:03:00Z”，
y:4100
},
{
x:“2015-03-17T13:03:00Z”，
y:4900
},
{
x:“2015-03-18T13:03:00Z”，
y:4050
}
],
填充：假，
边框颜色：“绿色”
}
]
},
选项：{
回答：是的，
标题：{
显示：对，
文本：“Chart.js时间刻度”
},
比例：{
xAxes：[{
键入：“时间”，
时间：{
tooltipFormat:'ll'
},
scaleLabel：{
显示：对，
标签字符串：“日期”
}
}],
雅克斯：[{
scaleLabel：{
显示：对，
标签字符串：“值”
}
}]
},
注释：{
drawTime:“afterDatasetsDraw”，
注释：[{
键入：“行”，
模式：“垂直”，
scaleID:'x轴-0'，
值：“2015-03-17T13:03:00Z”，
边框颜色：“红色”，
边框宽度：1，
标签：{
启用：对，
位置：“顶部”，
内容：“somelabel”
}
}]
}
}
};
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myLine=新图表（ctx，配置）
哦，该死。多谢各位。