私は棒グラフと折れ線グラフをChart.jsを使って作成しようとしていますが、グラフを棒グラフにして別のラベルセットにしたいと思っていました。Chart.js棒グラフ
折れ線グラフのデータは最初と最後の点[2800、1300]にあり、棒グラフのラベルを横切って線を引っ張りたいのです。
これは可能ですか?
私は棒グラフと折れ線グラフをChart.jsを使って作成しようとしていますが、グラフを棒グラフにして別のラベルセットにしたいと思っていました。Chart.js棒グラフ
折れ線グラフのデータは最初と最後の点[2800、1300]にあり、棒グラフのラベルを横切って線を引っ張りたいのです。
これは可能ですか?
https://jsfiddle.net/fgx92Lm5/
ラインのデータは、次のようになります。
data: [2800,2680,2565,2450,2335,2220,2105,1990,1875,1760,1645,1530,1415,1300]
つまり、終点に基づいて他の値を計算し、線を得る方法で棒の数に基づいて計算する必要があります。
デルタ=(2800から1300)/ 13 =〜115
アレックスのおかげで、私はこれをこのように解決することができました。 http://jsfiddle.net/anthonyumpad/956a0Lnd/ – watcher
IはChartjsを拡張することによってこの問題を解決することができました。スニペットやフィドルを経由して*結果*を共有
var originalLineDraw = Chart.controllers.bar.prototype.draw;
Chart.helpers.extend(Chart.controllers.bar.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, 0), yaxis.getPixelForValue(70));
ctx.strokeStyle = '#000000';
ctx.lineTo(xaxis.getPixelForValue(undefined, 7), yaxis.getPixelForValue(10));
ctx.stroke();
ctx.restore();
}
}
});
var config = {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 0, 80, 81, 56, 85, 40],
fill: false
}],
lineAtIndex: 2
}
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myChart"></canvas>
マイン? –
https://jsfiddle.net/anthonyumpad/2tp6uw32/ – watcher