混合チャート内のラインとバーの整列

Question

私はステップチャートをbarchartにプロットする必要がある混合チャートで作業しています。私はそうのようなバーの始まりに合わせて行の先頭を作りたい

：

私の折れ線グラフでデータポイントは、このようなデフォルトではバーの中央に整列されています

私はChartjsのドキュメントを読んできましたが、私のバーの冒頭で行を始める方法が見つかりません。

Iセットアップ少し例を少しさらに私の問題を説明する：

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/

Answer 1

私はドキュメンテーションを経てこれを修正する方法については何も見つかりませんでした。私はコードを使ってそれを修正するのは比較的簡単ですが、少年は間違っていました。とにかく私はそれを働かせました、あなたは手動でchart.jsソースファイルのコードを変更する必要があります。ここでは、前

を変更する必要がある行がある（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 
        ); 
       } 
      } 

： 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/

出力：

私は、これはあなたの問題を解決を願って:)