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 元素，我不确定我是否要遵循这条路线） p>

这里有一些如何在画布上绘制垂直线的示例：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]; 
}

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

Answer 2

除了您找到的选项之外，您还可以使用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'
        }
      }]
    }
  }
});

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

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