Y軸の最大値と最小値を設定する方法

http://www.chartjs.org/ のラインチャートを使用しています。 .

Y軸の最大値(130)と最小値(60)が自動的に選択されているのがわかりますが、最大値＝500、最小値＝0にしたいのですが、可能でしょうか？

Uwe Keim
編集された質問 21日 2月 2019 в 5:41
プログラミング
chart.js
11日 3月 2015 в 3:26
264 ビュー

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ドキュメントを参照してください。

Pedro A
編集した答え 10日 1月 2018 в 4:07
解説 (2)
ソリューション

目盛りを上書きする必要がありますが、これを試してみてください。

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 
    });
}
解説 (3)

。

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>

。

解説 (2)

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
Eduardo Dennis
編集した答え 25日 7月 2017 в 7:53
解説 (2)

チャートjs 2.3.0が最新のものである一方で、2016年にこれを書きました。 これを変更する方法は次のとおりです。

              var options = {
                    scales: {
                       yAxes: [{
                                display: true,
                                stacked: true,
                                ticks: {
                                    min: 0, // minimum value
                                    max: 10 // maximum value
                                }
                       }]
                    }
               };
Damien Sawyer
編集した答え 3日 5月 2018 в 4:52
解説 (0)

上記の回答ではうまくいきませんでした。もしかしたら '11 からオプション名が変更されたのかもしれませんが、私の場合は以下の方法でうまくいきました。

ChartJsProvider.setOptions
  scaleBeginAtZero: true
解説 (1)
 
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。

解説 (3)

これは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。

JPeG
編集した答え 9日 6月 2016 в 5:23
解説 (1)
 
yAxes: [{
    display: true,
    ticks: {
        beginAtZero: true,
        steps:10,
        stepValue:5,
        max:100
    }
}]
Tunaki
編集した答え 16日 5月 2016 в 9:13
解説 (1)

オプションでscaleStartValueの値を設定するだけです。

var options = {
   // ....
   scaleStartValue: 0,
}

これに関するドキュメントはこちらをご覧ください。

解説 (1)

jsを書いて、ギャップが20のy軸で0から100の値を表示しました。

これが私のscript.jsです。

。

//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,
        }
      }]
    }
  }
});

。

これはウェブに表示されるグラフです。

。![町の車両のパーセンテージ](https://i.stack.imgur.com/GdcMj.jpg。)。

解説 (0)

1.1.1では、0.0から1.0の間のスケールを修正するために以下を使用しました。

var options = {
    scaleOverride: true,
    scaleStartValue: 0,
    scaleSteps: 10,
    scaleStepWidth: 0.1
}
Lingasamy Sakthivel
編集した答え 25日 6月 2016 в 10:02
解説 (0)

私の場合、私はヤクシスのダニでコールバックを使用しました。 私の値はパーセントで、100%に達するとドットが表示されないため、これを使用しました。

      yAxes: [{
                   ticks: {
                       beginAtZero: true,
                       steps: 10,
                       stepValue: 5,
                       max: 100.1,
                       callback: function(value, index, values) {
                           if (value !== 100.1) {
                               return values[index]
                           }
                       }
                   }
               }],

そしてそれはうまくいった。

解説 (0)

チャートには「min」と「max」の値があります。 このリンクのドキュメント。

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html。

解説 (1)

上記の提案のいずれもcharts.js 2.1.4に役立たなかったので、データセット配列に値0を追加することで解決しました(ただし、追加のラベルはありません)。

statsData.push(0);

[...]

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        datasets: [{
            data: statsData,
[...]
解説 (0)

不明な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);
解説 (0)