javascript - ChartJS - 如何显示单个元素为一条线的折线图？ (不是一个点)

Question

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

When creating a chart, you have the option to overlay different chart types on top of each other as separate datasets.

To do this, you must set a type for each dataset individually. You can create mixed chart types with bar and line chart types.

When creating the chart you must set the overall type as bar.

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

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

ChartJS 以单个元素作为点显示折线图 - Chartjs linechart with only one point - how to center (他们建议添加一些 null 元素，我不确定是否要遵循该路线)

这里有一些如何在 Canvas 上绘制垂直线的例子:http://jsfiddle.net/zk9oc4c9/ (手动计算一切感觉太费力了)

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

也许有更好的方法？

Answer 1

这对我帮助很大:How to draw Horizontal 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]; 
}

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