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 - how to center （他们建议添加一些null元素，我不确定是否要遵循该路线）

以下是一些如何在画布上绘制垂直线的示例：http://jsfiddle.net/zk9oc4c9/ （手动计算所有内容感觉太费力了）

Codepen：http://codepen.io/stefek99/pen/WpRQgp?editors=1010

也许有更好的方法？

Answer 1

除了您找到的选项之外，您还可以使用chart.js annotation plugin轻松绘制线条，而无需手动处理画布中的渲染像素。请注意，该插件由与chart.js相同的团队创建/支持，并在chart.js docs中提及。

这是展示您的方案的example codepen。

添加插件后，只需在图表配置中设置其他属性即可。

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January"],
    datasets: [{
      label: 'Dataset 1',
      borderColor: window.chartColors.blue,
      borderWidth: 2,
      fill: false,
      data: [5]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Stacked Bar and Unstacked Line Combo Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y-axis-0',
        value: 5,
        borderColor: 'rgb(75, 192, 192)',
        borderWidth: 4,
        label: {
          enabled: false,
          content: 'Test label'
        }
      }]
    }
  }
});

这仍然有点麻烦，因为您已经定义了与数据点值分开的行的位置，但它确实比其他方法更容易。

我不确定该插件是否存在现有的角度扩展，但我认为如果需要，您可以创建一个足够简单。

Answer 2

这对我帮助很大：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]; 
}

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