Chart.jsグラフの水平バーごとにカスタマイズされたstepSizeを作成する方法
R15
4つの水平のグラフを実装しましたbars。最後のバーには約35kレコードがあるため、stepSize 自動的に2250になります。最初のバーには20レコードしかありません。
最初のbar's20レコードは、stepSize2250と比較して数が少ないため、色が表示されていません。
これは私のコードです
scales: {
xAxes: [
{
ticks: {
beginAtZero: true,
stepSize: 50,
},
stacked: true
}
],
yAxes: [
{
ticks: {
fontSize: 12
},
stacked: true
}
]
},
animation: {
onComplete: function() {
var chartInstance = this.chart;
var ctx = chartInstance.ctx;
ctx.textAlign = "left";
ctx.fillStyle = "#fff";
//draw total count
charData.datasets[0].data.forEach(function(data, index) {
var total = this.data.datasets[0].data[index];
var meta = chartInstance.controller.getDatasetMeta(0);
var posX = meta.data[index]._model.x;
var posY = meta.data[index]._model.y;
ctx.fillStyle = "black";
if(total.toString().length>=5)
ctx.fillText(total, posX -40, posY + 2);
else if(total==0)
ctx.fillText(total, posX -4, posY + 4);
else
ctx.fillText(total, posX - 10, posY + 4);
}, this);
}
これが出力されます
この問題を修正するにはどうすればよいですか？
uminder
あなたの問題は関係ありませんticks.stepSize、このオプションは単に目盛りを作成する方法を制御しますが、バーのサイズを変更しません。
以下の実行可能なコードスニペットに示すように、x軸を対数デカルト軸として定義できます。
new Chart('myChart', {
type: 'horizontalBar',
data: {
labels: ['0-12 hr', '12-24 hr', '1-3 day', '3-15 day'],
datasets: [{
label: '',
data: [20, 0, 0, 34343],
backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)"],
borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)"],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
type: 'logarithmic',
ticks: {
beginAtZero: true,
userCallback: (value, index) => {
const remain = value / (Math.pow(10, Math.floor(Chart.helpers.log10(value))));
if (remain == 1 || remain == 2 || remain == 5 || index == 0) {
return value.toLocaleString();
}
return '';
}
},
gridLines: {
display: false
}
}]
}
}
});canvas {
max-width: 400px;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="myChart" height="150"></canvas>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
Chart.js 2.0ドーナツグラフのツールチップをカスタマイズする方法
- 2
Chart.js折れ線グラフのツールチップをカスタマイズするにはどうすればよいですか？
- 3
chart.js棒グラフのツールチップをカスタマイズする
- 4
Chart.js折れ線グラフのy軸ラベルをカスタマイズするにはどうすればよいですか？
- 5
Chart.JSのカスタマイズ-デバッグ方法は？
- 6
y軸がロックされた水平スクロールChart.js折れ線グラフを作成するにはどうすればよいですか？
- 7
chart.js3の棒グラフと折れ線グラフの上部にデータ値を表示する方法
- 8
chart.js-バーごとの水平線
- 9
Doughnutchart ng2chart.jsでパーセンテージラベルをカスタマイズする方法
- 10
Chart.jsのカスタマイズ
- 11
Print chart using chart js
- 12
Chart.js を使用して、検出されたアクティビティを 1 時間ごとにグラフ化する方法
- 13
Chart.js-マウスオーバーにより、グラフがちらつき、サイズが変更されます
- 14
Chart.jsの各データセットに目盛りstepSizeを設定することは可能ですか？
- 15
Chart.js折れ線グラフでラベルと凡例のカーソルポインタを表示する方法
- 16
chart.dataSource.urlを介してロードされたデータに基づいて可変数の線でグラフを作成する方法
- 17
Chart.js 2.7.0グループ化された水平棒グラフ、グループ全体ではなく1つの棒のデータを表示するツールチップを取得するにはどうすればよいですか？
- 18
ウォーターフォールチャートを作成するためのchart.jsプラグイン
- 19
ネストされたデータを使用してd3.chartで複数のグラフを作成する方法
- 20
Chart.jsで境界線のスタイルをカスタマイズする方法
- 21
多軸折れ線グラフのchart.jsでカスタムデータ形式を使用する
- 22
Chart.jsのタイトルカラーボックスを削除する方法
- 23
カーソルが間違った位置にあると、Chart.jsのマウスオーバーツールチップが表示されます
- 24
サーバーからJSONデータを取得し、chart.jsを使用してグラフを作成する方法
- 25
chart.jsで各スライスの円グラフデータ値を表示する方法
- 26
Chart.jsマルチバースタックチャートに複数のラベルを表示する方法
- 27
Chart.JSのチャートに提供されたデータ値をコンマ化する方法は？
- 28
chart.jsv2-タイムスケールを使用するときにグラフを「塗りつぶす」方法
- 29
これはchart.jsからのカスタマイズの質問です
コメントを追加