在混合图表中对齐线条和条形答案

【问题标题】：Align lines and bars in a mixed chart在混合图表中对齐线条和条形
【发布时间】：2018-01-19 13:55:56
【问题描述】：

我正在制作一个混合图表，我需要在条形图上绘制阶梯线图。默认情况下，我的折线图中的数据点在条形中间对齐，如下所示：

我想让行的开头与栏的开头对齐，如下所示：

我已经浏览了 Chartjs 的文档，但我找不到让行从我的栏开头开始的方法。

我设置了一个小例子来进一步解释我的问题：

var opc = $("#chart");
var myChart = new Chart(opc, {
  type: 'bar',
  data: {
    labels: ['Item 1', 'Item 2', 'Item 3'],
    datasets: [{
      type: 'bar',
      label: 'Bar Component',
      data: [10, 20, 30],
    }, {
      type: 'line',
      steppedLine: true,
      label: 'Line Component',
      data: [25, 5, 20],
      fill: false
    }]
  },
  options: {
    scales: {
      yAxes: [{
        display: true,
        ticks: {
          suggestedMin: 0, // minimum will be 0, unless there is a lower value.
          // OR //
          beginAtZero: true // minimum value will be 0.
        }
      }]
    }
  }
});

这是一个工作小提琴的链接：https://jsfiddle.net/7yheenc6/1/

【问题讨论】：

标签： javascript alignment bar-chart chart.js linechart

【解决方案1】：

我浏览了文档，但找不到有关如何解决此问题的任何信息。我虽然通过代码修复它会相对简单，但是我错了，无论如何我让它工作，你需要手动更改chart.js源文件中的代码。这是您需要更改的行

之前(chart.js)：

行号：12891

function lineToPoint(previousPoint, point) {
                var vm = point._view;
                if (point._view.steppedLine === true) {
                    ctx.lineTo(point._view.x, previousPoint._view.y);
                    ctx.lineTo(point._view.x, point._view.y);               
                } else if (point._view.tension === 0) {
                    ctx.lineTo(vm.x, vm.y);
                } else {
                    ctx.bezierCurveTo(
                        previousPoint._view.controlPointNextX,
                        previousPoint._view.controlPointNextY,
                        vm.controlPointPreviousX,
                        vm.controlPointPreviousY,
                        vm.x,
                        vm.y
                    );
                }
            }

之后（chart.js）：

行号：12891

function lineToPoint(previousPoint, point) {
    var vm = point._view;
    if (point._view.steppedLine === true) {
        ctx.lineTo((point._view.x - previousPoint._view.x)/2 + previousPoint._view.x, previousPoint._view.y);
        ctx.lineTo((point._view.x - previousPoint._view.x)/2 + previousPoint._view.x, point._view.y);   
        ctx.lineTo(point._view.x, point._view.y);           
    } else if (point._view.tension === 0) {
        ctx.lineTo(vm.x, vm.y);
    } else {
        ctx.bezierCurveTo(
            previousPoint._view.controlPointNextX,
            previousPoint._view.controlPointNextY,
            vm.controlPointPreviousX,
            vm.controlPointPreviousY,
            vm.x,
            vm.y
        );
    }
}

Jsfiddle 供参考：https://jsfiddle.net/Kai_Draord/7yheenc6/4/

输出：

我希望这能解决你的问题:)

【讨论】：