2
round the bars on bar chartをこのポストで見つけようとすると、提供されたjsFiddleに表示されているように動作します。これはバージョン1用です。Bar Chart.js v2の丸い棒を作成するには？
私が使用しているグラフでは、extendへの参照のために読み込みに失敗し、Chart.types.Bar.extendでスクリプトがクラッシュします。
デフォルトオプションを使用すると、チャートに問題はありません。私は正しくロードするデフォルトオプションのために最後にChart.types.Bar.extendを配置しなければならなかった。フルスクリーンでこれを実行し、表示します。
私のバージョンのChart.js 2.4.0でこれを実装しようとしました。
Chromeが報告されます。
Uncaught TypeError: Cannot read property 'extend' of undefined chart.js
このコードは、ここでも実行されません。これはなぜ起こるのですか？誰かが私を助けてくれますか？
このコードは、古いバージョンのChart.js 1.0で動作します。バージョンChart.js 2.0でこれがどのように機能するかを誰かがさらに表示できますか？ありがとうございました。ほぼいっぱいのチャートである（chart.js v2の
$(document).ready(function(){
\t var myBarChart1 = new Chart($('#appBarChart2_NoRound'), {
\t \t type: 'bar',
\t \t data: dataBar2,
\t \t options: optionsBar
\t });
var ctx = $("#appBarChart2").getContext("2d");
\t var myBarChart2 = new Chart(ctx).BarAlt(dataBarAlt2, {
\t \t // 0 (flat) to 1 (more curvy)
\t \t curvature: 1
\t });
});
var dataBarAlt2 = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "#1A9BFC",
strokeColor: "#1A9BFC",
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var dataBar2 = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: '#1A9BFC',
borderColor:'#1A9BFC',
borderWidth: 1,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var optionsBar =
\t \t {
scales: {
xAxes: [{
stacked: true,
\t \t \t \t barThickness: 20,
\t \t \t \t gridLines:{
\t \t \t \t \t display:false,
\t \t \t \t }
// \t \t \t \t barPercentage:0.5,
}],
yAxes: [{
stacked: true,
\t \t \t \t
// \t \t \t \t barPercentage:0.5,
}]
},
\t \t legend: {
\t \t \t display: false,
// \t \t \t position: 'left'
\t \t }
};
Chart.types.Bar.extend({
name: "BarAlt",
initialize: function (data) {
Chart.types.Bar.prototype.initialize.apply(this, arguments);
if (this.options.curvature !== undefined && this.options.curvature <= 1) {
var rectangleDraw = this.datasets[0].bars[0].draw;
var self = this;
var radius = this.datasets[0].bars[0].width * this.options.curvature * 0.5;
// override the rectangle draw with ours
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
bar.draw = function() {
// draw the original bar a little down (so that our curve brings it to its original position)
var y = bar.y;
// the min is required so animation does not start from below the axes
bar.y = Math.min(bar.y + radius, self.scale.endPoint - 1);
// adjust the bar radius depending on how much of a curve we can draw
var barRadius = (bar.y - y);
rectangleDraw.apply(bar, arguments);
// draw a rounded rectangle on top
Chart.helpers.drawRoundedRectangle(self.chart.ctx, bar.x - bar.width/2, bar.y - barRadius + 1, bar.width, bar.height, barRadius);
ctx.fill();
// restore the y value
bar.y = y;
}
})
})
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Bar Chart - Working</p>
<canvas id="appBarChart2_NoRound" height="100" >
</div>
<div>
<p>Rounded Bar Chart - Not Working</p>
<canvas id="appBarChart2" height="100" >
</div>
このコードが機能しない理由は、for for chart.js v1です。 Chart.js v2は主要な再因子であり、もはや 'Chart.types'名前空間さえありません。だからあなたの質問に「なぜこの作品はありませんか」と答えます。おそらく、chart.js 2.0で丸いバーを作成する方法について新しい質問をしたいのですか？ – jordanwillis
@jordanwillis shiftを押したままタイプをクリックすると、core.controller.jsが表示されます。レポートを実行するときに別の問題が発生すると、このスニペットがわかります。それは2.5の例に含まれているオンラインバージョンIに関連する可能性があります。0 – mcv
おそらく彼らは後世や何かの名前空間を保っていたでしょう。しかし、結論は、v2はv1とは非常に異なり、v2に使用しようとしているコードを書き直す必要があるということです。 v2の場合と同様の機能の回答を提供したい場合はお知らせください。 – jordanwillis