http://www.chartjs.org/ のラインチャートを使用しています。 .
Y軸の最大値(130)と最小値(60)が自動的に選択されているのがわかりますが、最大値=500、最小値=0にしたいのですが、可能でしょうか?
chart.js V2(ベータ版)の場合、以下を使用します。
var 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.
}
}]
}
};
詳細については、線形軸構成に関するchart.jsドキュメントを参照してください。
目盛りを上書きする必要がありますが、これを試してみてください。
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
scaleOverride : true,
scaleSteps : 10,
scaleStepWidth : 50,
scaleStartValue : 0
});
}
<。!-スニペットを開始:js hide:false console:false babel:false -->。
var config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [10, 80, 56, 60, 6, 45, 15],
fill: false,
backgroundColor: "#eebcde ",
borderColor: "#eebcde",
borderCapStyle: 'butt',
borderDash: [5, 5],
}]
},
options: {
responsive: true,
legend: {
position: 'bottom',
},
hover: {
mode: 'label'
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100
}
}]
},
title: {
display: true,
text: 'Chart.js Line Chart - Legend'
}
}
};
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<canvas id="canvas"></canvas>
</body>
<。!-終了スニペット-->。
ChartJS v2.4.0。
2017年2月7日のhttps://github.com/jtblin/angular-chart.jsの例に示されているように(これは頻繁に変更される可能性があるため):
var options = {
yAxes: [{
ticks: {
min: 0,
max: 100,
stepSize: 20
}
}]
}
これにより、5つのy軸値が得られます。
100
80
60
40
20
0
チャートjs 2.3.0が最新のものである一方で、2016年にこれを書きました。 これを変更する方法は次のとおりです。
var options = {
scales: {
yAxes: [{
display: true,
stacked: true,
ticks: {
min: 0, // minimum value
max: 10 // maximum value
}
}]
}
};
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx ,{
type: 'line',
data: yourData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
min: 0,
max: 500
}
}]
}
}
});
v2で「オプション」を設定します。
ドキュメントを読む必要があります: http://www.chartjs.org/docs/#scales-linear-scale。
これはCharts.js 2.0:用です。
これらのいくつかが機能しない理由は、そのようにグラフを作成するときにオプションを宣言する必要があるためです。
$(function () {
var ctxLine = document.getElementById("myLineChart");
var myLineChart = new Chart(ctxLine, {
type: 'line',
data: dataLine,
options: {
scales: {
yAxes: [{
ticks: {
min: 0,
beginAtZero: true
}
}]
}
}
});
})
このドキュメントはこちらです。 http://www.chartjs.org/docs/#scales。
jsを書いて、ギャップが20のy軸で0から100の値を表示しました。
これが私のscript.jsです。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
//x-axis
var vehicles = ["Trucks", "Cars", "Bikes", "Jeeps"];
//The percentage of vehicles of each type
var percentage = [41, 76, 29, 50];
var ctx = document.getElementById("barChart");
var lineChart = new Chart(ctx, {
type: 'bar',
data: {
labels: vehicles,
datasets: [{
data: percentage,
label: "Percentage of vehicles",
backgroundColor: "#3e95cd",
fill: false
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 20,
}
}]
}
}
});
<。!-終了スニペット-->。
これはウェブに表示されるグラフです。
。。
1.1.1では、0.0から1.0の間のスケールを修正するために以下を使用しました。
var options = {
scaleOverride: true,
scaleStartValue: 0,
scaleSteps: 10,
scaleStepWidth: 0.1
}
私の場合、私はヤクシスのダニでコールバックを使用しました。 私の値はパーセントで、100%に達するとドットが表示されないため、これを使用しました。
yAxes: [{
ticks: {
beginAtZero: true,
steps: 10,
stepValue: 5,
max: 100.1,
callback: function(value, index, values) {
if (value !== 100.1) {
return values[index]
}
}
}
}],
そしてそれはうまくいった。
チャートには「min」と「max」の値があります。 このリンクのドキュメント。
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html。
不明なchart.jsのv1.xを使用していた複数のプロジェクトで古いバージョンのFlat Labテンプレートを使用していました。すでに複数のプロジェクトで作業していたため、v2.xに更新できませんでした。 。 上記の「(バルデータ、オプション)」は私には機能しませんでした。
これがバージョン1.xのハックです。
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);
に置き換えます。
calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);