Question

我正在尝试使用mySQL数据库中的数据制作折线图。我使用新数据每10分钟刷新页面，现在y轴上的值基于数据，并且可以在数据更改时随时间变化。我希望y轴的标准最小值为0，最大值为100。我试图引入更多选项，但我没有让它发挥作用。

    <canvas id="c" width="500" height="500">grafiek kan niet laden</canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
    <script>
        var ctx = document.getElementById("c").getContext("2d");
        var data = {
          labels: ["Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag", "Zondag"],
          datasets: [
            {
            fillColor: "#ffccef", // kleur onder de lijn
            strokeColor: "rgba(250,127,163,1)", // lijn kleur
            pointColor: "rgba(200,100,150,1)", // puntjes op grafiek
            pointStrokeColor: "#fff",
            data: RH1 
          },
          {
            fillColor: "#ffb3b3", // kleur onder de lijn
            strokeColor: "rgba(255,127,163,1)", // lijn kleur
            pointColor: "rgba(800,10,10,1)", // puntjes op grafiek
            pointStrokeColor: "#fff",
            data: temp1 
          }
          ]               
        };

        var MyNewChart = new Chart(ctx).Line(data);


    </script>

Answer 1

如果您的数据只有

的最大数量，那么这取决于您的数据

currentDataNumber/MaximumDataNumber * 100 = percentageRelativeToMaximum;

简单来说，您应该将数据转换为百分比。这可以通过多种方式实现。如果您要举例说明数据表，我可以提供更好的解决方案。

如果数据发生变化，您会在数据中找到最高数字。如果引入了新的最高数字，它将改变整个图形。

评论中的代码：

window.onload = function（）{var ctx = document.getElementById（“canvas”）。getContext（“2d”）; window.myLine = new Chart（ctx）.Line（lineChartData，{scaleOverride：true，scaleSteps：10，scaleStepWidth：10，scaleStartValue：0}）; }

折线图的Chartjs，y轴的值

1 个答案: