ChartJS - 如何显示单个元素作为一条线的折线图？（不是点）

Question

我正在使用：http://www.chartjs.org/docs/#chart-configuration-mixed-chart-types + AngularJS 包装器：http://jtblin.github.io/angular-chart.js/

创建图表时，您可以选择将不同的图表类型作为单独的数据集相互叠加。

为此，您必须为每个数据集单独设置类型。您可以使用条形图和折线图类型创建混合图表类型。

创建图表时必须将整体类型设置为条形。

线条的呈现方式略有不同 - 如果我在同一个图表上显示bar和line，则线条不会到达终点。

这并不重要，除非我只有单一元素......

ChartJS 将单个元素显示为点的折线图 - Chartjs linechart with only one point - 如何居中 （他们建议添加一些null元素，我不确定是否要遵循该路线）

这里有一些如何在画布上绘制垂直线的示例：http://jsfiddle.net/zk9oc4c9/ （感觉手动计算所有内容需要花费太多精力）

代码笔：http://codepen.io/stefek99/pen/WpRQgp? editors=1010

也许有更好的方法？

Answer 1

这对我帮助很大：How to draw Horizo​​ntal line on Bar Chart Chartjs

这是工作演示：http://codepen.io/stefek99/pen/ZeXzBr ?editors=1010

定义插件：

Chart.pluginService.register({
    afterDraw: function(chart) {

        if (typeof chart.config.options.lineAt != 'undefined') {
            var lineAt = chart.config.options.lineAt;
            var ctxPlugin = chart.chart.ctx;
            var xAxe = chart.scales[chart.config.options.scales.xAxes[0].id];
            var yAxe = chart.scales[chart.config.options.scales.yAxes[0].id];

            var position = yAxe.getPixelForValue(lineAt)

            ctxPlugin.strokeStyle = "red";
            ctxPlugin.beginPath();
            ctxPlugin.moveTo(xAxe.left, position);
            ctxPlugin.lineTo(xAxe.right, position);
            ctxPlugin.stroke();
        }
    }
});

检查线路是否需要

var _drawLineOnTopOfADot = function(chartData) {
  if (chartData.labels.length !== 1) return; // only handling graphs that have single item
  if (chartData.dataSetOverride.length < 2) return; // only when we have at least two types of graph
  var indexOfLineGraph = -1;
  for (var i=0; i<chartData.dataSetOverride.length; i++) {
    if (chartData.dataSetOverride[i].type === "line") {
      indexOfLineGraph = i;
      break;
    }
  }
  if (indexOfLineGraph === -1) return; // no line chart, no worries

  chartData.options = chartData.options || {};
  chartData.options.lineAt = chartData.data[indexOfLineGraph][0]; 
}

我在这上面花了太多时间。