在chartjs的折线图上绘制一个点

Question

我正在使用chartJs为我正在使用的应用程序生成图表。

我可以使用type：line

生成折线图

new Chart(document.getElementById("total-chart"), {
                type: 'line',
                data: {
                    labels: [ {!! $dates_string !!} ],
                    datasets: [
                        {
                            data: [ {!! $totals_string !!} ],
                            label: 'Totals',
                            // steppedLine: true,
                            borderColor: "#3e95cd",
                            labels: [ {!! $dates_string !!} ],
                            pointRadius: 1,
                            fill: false
                        }
                    ]
                },
                options: {
                    title: {
                        display: true,
                        text: 'Total'
                    },
                    tooltips: {
                        intersect: false,
                        mode: 'index'
                    },
                    animation: {
                        duration: 0
                    }
                }
            });

生成折线图

我想在此行的顶部显示一个或多个点/点，以指示特定日期的其他相关事件。

我在发布问题之前已经进行过搜索，但是关于如何进行搜索的文档却很少。

Answer 1

截至目前，我可以得到的最好的解决方案是通过添加像这样的数据集来使用混合线图和气泡图

new Chart(document.getElementById("total-chart"), {
    type: 'line',
    data: {
        labels: [ {!! $dates_string !!} ],
        datasets: [
            {
                data: [ {!! $totals_string !!} ],
                label: 'Totals',
                // steppedLine: true,
                borderColor: "#3e95cd",
                labels: [ {!! $dates_string !!} ],
                pointRadius: 1,
                fill: false
            },
            {
                data: [ {
                    x: '2018-01-18',
                    y: 24500,
                    r: 5
                } ],
                label: ['Diff'],
                // steppedLine: true,
                backgroundColor: "#cd2026",
                type: 'bubble'
            }
        ]
    },
    options: {
        title: {
            display: true,
            text: 'Total'
        },
        tooltips: {
            intersect: false,
            mode: 'index'
        },
        animation: {
            duration: 0
        }
    }
);

结果看起来有点像这样。

然而，泡泡的标签很有趣，因为我有非数值x轴。它只显示了为什么鼠标在x轴上徘徊。休息一切按预期工作