如何在 Chart.js 中放置静态点并制作垂直线

Question

js 社区，

我想对 Chart.js 进行一些自定义，但遇到了一些基本问题...

我所达到的你可以在这张照片中看到

我的问题是如何在图表中设置固定点？ 有什么方法可以做到我尝试的是 {showXLabels: 10} 建议 Limit labels number on Chartjs line chart 这里

到目前为止，我找不到任何合乎逻辑的解决方案，我也尝试直接修改库，但到目前为止没有运气。

我的目标是这个

我想知道是否有人可以建议我一些聪明的东西？

或我可以使用的其他库以使第二个图形正常工作

Answer 1

---

绘制带标签的垂直线和标记点

只需扩展图表（实际上，如果您不需要工具提示，您可以在 onAnimationComplete 回调中做同样的事情）

var data = {
    labels: ['0%', '10%', '20%', '30%', '40%', '50%', '60%', '70%', '80%', '90%', '100%'],
    datasets: [{
        strokeColor: 'rgba(0, 190, 242, 1)',
        fillColor: 'rgba(177, 235, 250, 1)',
        data: [12, 30, 20, 10, 30, 50, 70, 76, 80, 90, 95]
    }]
};


var ctx = document.getElementById("LineExt").getContext("2d");
Chart.types.Line.extend({
    name: "LineExt",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);

        // hide alternate x labels on the scale
        var xLabels = this.scale.xLabels;
        xLabels.forEach(function (xLabel, i) {
            if (i % 2)
                xLabels[i] = '';
        })
    },
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var scale = this.scale;
        var points = this.datasets[0].points;
        var ctx = this.chart.ctx;
        var options = this.options;

        ctx.save();
        var y0 = scale.calculateY(0);
        this.options.points.forEach(function (point) {
            // linearly extrapolate y value from nearby points
            point.y = (points[Math.floor(point.xIndex)].value + points[Math.ceil(point.xIndex)].value) / 2;

            var x = scale.calculateX(point.xIndex);
            var y = scale.calculateY(point.y);

            // draw the circle
            ctx.beginPath();
            ctx.arc(x, y, 5, 0, 2 * Math.PI);
            ctx.fillStyle = point.color;
            ctx.fill();

            if (point.dropLine) {
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(x, y0);
                ctx.setLineDash([5, 5]);
                ctx.lineWidth = 2;
                ctx.strokeStyle = point.color;
                ctx.stroke();

                // use the same function that chart.js uses to draw the tooltip to draw our label
                var text = Chart.helpers.template(options.boxTemplate, { value: point.y })
                var boxWidth = ctx.measureText(text).width + 2 * options.tooltipXPadding;
                var boxHeight = options.tooltipFontSize + 2 * options.tooltipYPadding;
                Chart.helpers.drawRoundedRectangle(ctx, x - boxWidth / 2, y - boxHeight - options.tooltipCaretSize, boxWidth, boxHeight, options.tooltipCornerRadius);
                ctx.fill();
                ctx.fillStyle = '#fff';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(text, x, y - boxHeight / 2 - options.tooltipCaretSize);
            }
        })
        ctx.restore();
    }
});

new Chart(ctx).LineExt(data, {
    scaleLabel: "<%=''%>",
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
    scaleFontColor: 'rgba(193, 193, 193, 1)',
    pointDot: false,
    bezierCurve: false,
    scaleOverride: true,
    scaleSteps: 10,
    scaleStepWidth: 10,
    scaleStartValue: 0,
    datasetStrokeWidth: 5,
    points: [
        { xIndex: 4.5, color: 'rgba(0, 190, 242, 1)' },
        { xIndex: 6.5, color: 'rgba(208, 84, 25, 1)' },
        { xIndex: 8, color: 'rgba(199, 0, 160, 1)', dropLine: true }
    ],
    boxTemplate: "<%=value%>%"
});

---

小提琴 - http://jsfiddle.net/4jbdy2d7/