循環為圖表chart創建線

Question

因此，我進行了一個項目，在該項目中讀出了溫度檢測器，並且需要制作一個顯示數據的折線圖。

問題：如何制作折線圖，以便根據連接的傳感器創建折線。

這些是我的數組（這必須是Y值）：

這些是溫度：

array (size=76377)  
0 =>  
array (size=4) //This is one recording  
0 => 22,4 //This is sensor1  
1 => 15,9 //This is sensor2  
2 => 32,5 //This is sensor3  
3 => NULL //This is sensor4  
1 =>  
array (size=4)  
0 => NULL  
1 => NULL  
2 => NULL  
3 => 2,1  
2 =>  
array (size=4)  
0 => 8,2  
1 => 18,5  
2 => 20,3  
3 => NULL

這些是他們記錄溫度的時刻（這必須是X值）：

array (size=76476)  
   0 => string '2018-02-27 11:33:35' (length=19)  
   1=> string '2018-02-27 11:34:23' (length=19)  
   2 => string '2018-02-27 11:37:25' (length=19)  
   3 => string '2018-02-27 11:37:58' (length=19)   
 4 => string '2018-02-27 11:38:16' (length=19)  

我使用此圖中的代碼
http://www.chartjs.org/samples/latest/charts/line/multi-axis.html

碼：

<script>
    var yas = <?php echo json_encode($yas) ?>;
    var datum = <?php echo json_encode($datums) ?>;
    var namen = <?php echo json_encode($alleSensorNamen) ?>;

    var lineChartData = {
            labels: datum,
            datasets: [{
                label: 'My First dataset',
                borderColor: window.chartColors.red,
                backgroundColor: window.chartColors.red,
                fill: false,
                data: yas; //Here i need to enter the temp i guess
                yAxisID: 'y-axis-1',
            }, {
                label: 'My Second dataset',
                borderColor: window.chartColors.blue,
                backgroundColor: window.chartColors.blue,
                fill: false,
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor()
                ],
                yAxisID: 'y-axis-2'
            }]
        };

        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = Chart.Line(ctx, {
                data: lineChartData,
                options: {
                    responsive: true,
                    hoverMode: 'index',
                    stacked: false,
                    title: {
                        display: true,
                        text: 'Chart.js Line Chart - Multi Axis'
                    },
                    scales: {
                        yAxes: [{
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            position: 'left',
                            id: 'y-axis-1',
                        }, {
                            type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            position: 'right',
                            id: 'y-axis-2',

                            // grid line settings
                            gridLines: {
                                drawOnChartArea: false, // only want the grid lines for one axis to show up
                            },
                        }],
                    }
                }
            });
        };

        document.getElementById('randomizeData').addEventListener('click', function() {
            lineChartData.datasets.forEach(function(dataset) {
                dataset.data = dataset.data.map(function() {
                    return randomScalingFactor();
                });
            });

            window.myLine.update();
        });
    </script>

Answer 1

您可以在看起來合適的時候使用它，但這可以幫助您入門：

的HTML

<div id="test" style="height:600px; width:600px;">
    <canvas id="lineChart" style="border: 1px solid black; margin: 25px 25px" height="300">Canvas</canvas>
</div>

JS

var ctx = document.getElementById("lineChart");

var newBar = {
    labels: [ '2018-02-27 11:33:35', '2018-02-27 11:34:23', '2018-02-27 11:37:25', '2018-02-27 11:37:58'],
    datasets: [{
        fill: false,
        label: 'Sensor 1',
        backgroundColor: "red",
        data: [22.4, 15.9, 32.5, null],
    },
    {       
        fill: false,
        label: 'Sensor 2',
        backgroundColor: "yellow",
        data: [ null, null, null, 2,1],
    },{
        fill: false,
        label: 'Sensor 3',
        backgroundColor: "blue",
        data: [ -2, 8.2, 18.5, 20.3, null],
    }],
}

var myChart = new Chart(ctx, {
    type: 'line',
    data: newBar,

    options:{ 
        scales: {
            yAxes: [{
                ticks: {
                    stepSize: 2
                }
            }]
        },
        title:{
            display: true,
            fontSize: 16,
            text: 'Temp over Time'
        }, 
    }
});

這應該足以使您朝正確的方向發展。