在混合图表中对齐线条和条纹

我正在制作混合图表，我需要在条形图上绘制阶梯线图。在我的线型图的数据点都在栏的中间默认情况下是这样排列的：在混合图表中对齐线条和条纹

我想使该行的开始与小节的开始，像这样排列：

我已经通过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/

来源

2017-08-11 Clint Geense

我通过文档去但找不到解决方法。我虽然通过代码修复它会相对简单，但是男孩是我错了，无论如何，我得到它的工作，你需要手动更改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/

输出：

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

来源

2017-08-11 09:05:15

在混合图表中对齐线条和条纹

回答

相关问题