Question

我试图学习如何使用chart.js，但我无法让它与所有那些例子一起工作。我在mysql中有一个带温度数据和日期的表。管理使用getdata.php中的json_encode格式化它，就像这样（小例子）;

[
  {
    "date":"2018-04-01 00:00:02",
    "temp":"1.2"
  },
  {
    "date":"2018-04-01 01:00:50",
    "temp":"1.0"
  }
]

我一直在努力工作一周，尝试各种教程和例子，没有运气:( 有人可以告诉我如何将这些数据显示为一个简单的线图??? 有人知道有类似数据的例子吗？

Answer 1

试试这个：
HTML：

<!-- Importing Chart.js and creating our canvas to draw the line. -->
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
  </head>
  <body>
    <canvas id="myChart" width="400" height="400"></canvas>
  </body>
</html>

JAVASCRIPT：

// Our sample data.
var myDATA = [
  {
    "date":"2018-04-01 00:00:02",
    "temp":"1.2"
  },
  {
    "date":"2018-04-01 01:00:50",
    "temp":"1.0"
  }
];
// Grab the canvas.
var ctx = document.getElementById("myChart").getContext('2d');
// Paint to canvas a line chart with some options.
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [myDATA[0].date, myDATA[1].date],
        datasets: [{
            label: 'TEMPERATURES',
            data: [myDATA[0].temp, myDATA[1].temp]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

https://jsfiddle.net/j8h6qumq/10/

Answer 2

好的，它现在有效...... 在一些谷歌之后我发现我必须在canvas-tag之后执行脚本。

使用chart.js中的折线图显示困难的数据

2 个答案: