混在グラフの左マージンで折れ線グラフを整列できますか？

Question

私は以下のように混在チャートの左マージンで折れ線グラフを整列したいと思います。

しかし、私はデータで折れ線グラフを追加したときは、自動的に次のように既存の棒グラフに応じてセンターに揃えています。

https://jsfiddle.net/daehyung/cvekgadf/4/

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
type: 'bar', 
data: { 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
    datasets: [{ 
      type: 'bar', 
     label: 'A', 
     data: [12, 19, 3, 5, 2, 3], 
     borderWidth: 1 
    }, 
    { 
      type: 'line',   
     label: 'B', 
     data: [10, 8, 2, 3, 1, 2], 
     borderWidth: 1, 
     steppedLine: true 
      }] 
}, 
options: { 
    scales: { 
     yAxes: [{ 
      ticks: { 
       beginAtZero:true 
      } 
     }] 
    } 
} 
}); 

Answer 1

chart.js構成によって純粋にこれを実行する方法はありません。ソースをブラウジングした後、コンボバーのチャートに表示されたときに、内部的にoffset = trueプロパティで折れ線グラフが設定されていることがわかりました。

したがって、この動作を実現する唯一の方法は、折れ線グラフを拡張し、このoffset変数の設定を制御する独自の関数を実装することです。それはそれほど難しいことではないことが分かります。次に例を示します（offset変数は折れ線グラフのupdateElement()関数でのみ設定されています）。

var helpers = Chart.helpers; 

Chart.controllers.LineNoOffset = Chart.controllers.line.extend({ 
    updateElement: function(point, index, reset) { 
    var me = this; 
    var meta = me.getMeta(); 
    var custom = point.custom || {}; 
    var dataset = me.getDataset(); 
    var datasetIndex = me.index; 
    var value = dataset.data[index]; 
    var yScale = me.getScaleForId(meta.yAxisID); 
    var xScale = me.getScaleForId(meta.xAxisID); 
    var pointOptions = me.chart.options.elements.point; 
    var x, y; 
    var labels = me.chart.data.labels || []; 
    var includeOffset = false; 

    // Compatibility: If the properties are defined with only the old name, use those values 
    if ((dataset.radius !== undefined) && (dataset.pointRadius === undefined)) { 
     dataset.pointRadius = dataset.radius; 
    } 
    if ((dataset.hitRadius !== undefined) && (dataset.pointHitRadius === undefined)) { 
     dataset.pointHitRadius = dataset.hitRadius; 
    } 

    x = xScale.getPixelForValue(typeof value === 'object' ? value : NaN, index, datasetIndex, includeOffset); 
    y = reset ? yScale.getBasePixel() : me.calculatePointY(value, index, datasetIndex); 

    // Utility 
    point._xScale = xScale; 
    point._yScale = yScale; 
    point._datasetIndex = datasetIndex; 
    point._index = index; 

    // Desired view properties 
    point._model = { 
     x: x, 
     y: y, 
     skip: custom.skip || isNaN(x) || isNaN(y), 
     // Appearance 
     radius: custom.radius || helpers.getValueAtIndexOrDefault(dataset.pointRadius, index, pointOptions.radius), 
     pointStyle: custom.pointStyle || helpers.getValueAtIndexOrDefault(dataset.pointStyle, index, pointOptions.pointStyle), 
     backgroundColor: me.getPointBackgroundColor(point, index), 
     borderColor: me.getPointBorderColor(point, index), 
     borderWidth: me.getPointBorderWidth(point, index), 
     tension: meta.dataset._model ? meta.dataset._model.tension : 0, 
     steppedLine: meta.dataset._model ? meta.dataset._model.steppedLine : false, 
     // Tooltip 
     hitRadius: custom.hitRadius || helpers.getValueAtIndexOrDefault(dataset.pointHitRadius, index, pointOptions.hitRadius) 
    }; 
    }, 
}); 

新しいグラフタイプが定義されたら、この新しいタイプを使用するように設定を変更する必要があります。

ここにはcodepen exampleがあり、最終結果が示されています。

：それは既存のコードの多くを再利用するので、私は少し良くする方法を考え出した@jordanwillisによって回答に基づいて

Answer 2

は、それは、chart.js 2.7.*と互換性があり、そして将来のバージョンで使用することがより安全であるべき

Chart.controllers.LineNoOffset = Chart.controllers.line.extend({ 
    updateElement: function(point, index, reset) { 
     Chart.controllers.line.prototype.updateElement.call(this, point, index, reset); 
     const meta = this.getMeta(); 
     const xScale = this.getScaleForId(meta.xAxisID); 
     point._model.x = xScale.getPixelForValue(undefined, index-0.5); 
    }, 
});