相关疑难解决方法(0)

如何使用Chart.js在x轴上的特定点绘制垂直线？

特别是,我想画一条线来表示LineChart上的当前日期.这是图表的模型:http: //i.stack.imgur.com/VQDWR.png

任何人都可以告诉我如何扩展Chart.js v2.0.我需要在折线图中使用垂直线,我想实现类似于http://jsfiddle.net/dbyze2ga/的内容.

Chart.types.Line.extend({
name: "LineWithLine",
draw: function () {
    Chart.types.Line.prototype.draw.apply(this, arguments);

    var point = this.datasets[0].points[this.options.lineAtIndex]
    var scale = this.scale

    // draw line
    this.chart.ctx.beginPath();
    this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
    this.chart.ctx.strokeStyle = '#ff0000';
    this.chart.ctx.lineTo(point.x, scale.endPoint);
    this.chart.ctx.stroke();

    // write TODAY
    this.chart.ctx.textAlign = 'center';
    this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
}
});

new Chart(ctx).LineWithLine(data, {
                            datasetFill : false,
                            lineAtIndex: 2
 });

有许多扩展图表以包括水平和垂直线的示例.但是,我还没有找到一种用水平条形图绘制垂直线的方法.

1. 水平线图上的水平线
2. 水平线图上的垂直线
3. 垂直条形图上的水平线

没有"垂直折线图"选项,例如有"水平条形图"选项.如何将水平条形图与垂直线组合？

Chart.js文档

结果将有一个条形数据集和一个线数据集,可以使用相同的轴在同一图表上使用,如下所示:

嗨，我想在我的条形图中添加一条水平线。这是我的图表代码：

var singleBarOptions = {
    scaleBeginAtZero: true,
    scaleShowGridLines: true,
    scaleGridLineColor: "rgba(0,0,0,.05)",
    scaleGridLineWidth: 1,
    barShowStroke: true,
    barStrokeWidth: 1,
    barValueSpacing: 5,
    barDatasetSpacing: 1,
    responsive: true
};

var singleBarData = {
    labels: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"],

    datasets: [
        {
            label: "My Second dataset",
            fillColor: "rgba(0,191,255,0.5)",
            strokeColor: "rgba(0,191,255,0.8)",
            highlightFill: "rgba(100,149,237,0.75)",
            highlightStroke: "rgba(100,149,237,1)",
            data: [60, 50, 40, 30, 20, 10, 20]
        }
    ]
};
var ctx = document.getElementById("singleBarOptions").getContext("2d");
var myNewChart = new Chart(ctx).Bar(singleBarData, singleBarOptions);

有没有简单的方法来画这条线？如果我以后可以改变线的位置也很好。

stackoverflow 上有解决方案，但它们不处理设置。