添加标签

时间:2017-07-13 12:58:46

标签: javascript arrays json charts chart.js

我的图表中有JSON格式的数据集,这非常有效。我的图表显示等。但是,当我输入我想要的数组作为标签时,整个图表会中断。当我将标签更改为testId时,变量标签将被旋转并垂直放置。此外,图表将移动到图表容器的右侧。

以下是代码:

/*jslint browser: true*/
/*global $, jQuery, alert*/
$(document).ready(`enter code here`function () {
    $.ajax({
        url: "http://127.0.0.1/main/data.php",
        type: "POST",
        success: function (data) {
            console.log(data);

            var testId = [];
            var Act1_Pk_Pk_Gas = [];
            var Ref_Pk_Pk_Gas = [];
            var Offset_1 = [];
            var Ref_Pk_Pk = [];
            var Act1_Pk_Pk = [];
            var ABS1 = [];
            var Lamp_Max = [];
            var Lamp_Min = [];
            var System_Temp = [];

            for (var i in data) {
                testId.push(data[i].Sensor_No);
                Act1_Pk_Pk_Gas.push(data[i].Act1_Pk_Pk_Gas);
                Ref_Pk_Pk_Gas.push(data[i].Ref_Pk_Pk_Gas);
                Offset_1.push(data[i].Offset_1);
                Ref_Pk_Pk.push(data[i].Ref_Pk_Pk);
                Act1_Pk_Pk.push(data[i].Act1_Pk_Pk);
                ABS1.push(data[i].ABS1);
                Lamp_Max.push(data[i].Lamp_Max);
                Lamp_Min.push(data[i].Lamp_Min);
                System_Temp.push(data[i].System_Temp);


            }


            var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'line',

                // The data for our dataset
                data: {
                    labels: [testId],
                    datasets: [{
                            label: "Act1 Pk Pk Gas",
                            borderColor: 'rgb(255, 99, 132)',
                            data: Act1_Pk_Pk_Gas,
        }, {
                            label: "Ref Pk Pk Gas",
                            borderColor: 'rgb(18, 205, 221)',
                            data: Ref_Pk_Pk_Gas,
        }
        , {
                            label: "Offset 1",
                            borderColor: 'rgb(21, 232, 61)',
                            data: Offset_1,
        },
                               {
                            label: "Ref Pk Pk",
                            borderColor: 'rgb(237, 12, 237)',
                            data: Ref_Pk_Pk,
        }
        , {
                            label: "Act1 Pk Pk",
                            borderColor: 'rgb(189, 255, 41)',
                            data: Act1_Pk_Pk,
        }
        , {
                            label: "ABS1",
                            borderColor: 'rgb(255, 157, 0)',
                            data: ABS1,
        }
        , {
                            label: "Lamp Max",
                            borderColor: 'rgb(8, 8, 8)',
                            data: Lamp_Max,
        }
        , {
                            label: "Lamp Min",
                            borderColor: 'rgb(250, 79, 243)',
                            data: Lamp_Min,
        }
        , {
                            label: "System Temp",
                            borderColor: 'rgb(160, 113, 195)',
                            data: System_Temp,
        }]
                },

                // Configuration options go here
                options: {}
            });
        },
        error: function (data) {

        }
    });


});

这是我的数据文件:

<?php
// Connect to MySQL
$link = new mysqli( 'localhost', 'root', '', 'test' );
if ( $link->connect_errno ) {
  die( "Failed to connect to MySQL: (" . $link->connect_errno . ") " . $link->connect_error );
}


session_start();
$wybor = $_SESSION['wybor1']['checkAll'];
$ile=count($wybor);
switch($ile){
    case 1: $zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."`  FROM `pdane` WHERE `Test` = 2093";
    break;
    case 2: $zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."` FROM `pdane` WHERE `Test` = 2093";
    break;
    case 3: $zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."`, `".$_SESSION['wybor1']['checkAll'][2]."`  FROM `pdane` WHERE `Test` = 2093";
    break;
    case 4: $zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."`, `".$_SESSION['wybor1']['checkAll'][2]."` ,`".$_SESSION['wybor1']['checkAll'][3]."` FROM `pdane` WHERE `Test` = 2093";
    break;
    case 5: $zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."`, `".$_SESSION['wybor1']['checkAll'][2]."` ,`".$_SESSION['wybor1']['checkAll'][3]."`, `".$_SESSION['wybor1']['checkAll'][4]."` FROM `pdane` WHERE `Test` = 2093";
    break;
    case 6: $zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."`, `".$_SESSION['wybor1']['checkAll'][2]."` ,`".$_SESSION['wybor1']['checkAll'][3]."`, `".$_SESSION['wybor1']['checkAll'][4]."`, `".$_SESSION['wybor1']['checkAll'][5]."` FROM `pdane` WHERE `Test` = 2093";

    break;
    case 7: $zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."`, `".$_SESSION['wybor1']['checkAll'][2]."` ,`".$_SESSION['wybor1']['checkAll'][3]."`, `".$_SESSION['wybor1']['checkAll'][4]."`, `".$_SESSION['wybor1']['checkAll'][5]."`, `".$_SESSION['wybor1']['checkAll'][6]."`FROM `pdane` WHERE `Test` = 2093";
    break;
    case 8: $zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."`, `".$_SESSION['wybor1']['checkAll'][2]."` ,`".$_SESSION['wybor1']['checkAll'][3]."`, `".$_SESSION['wybor1']['checkAll'][4]."` ,`".$_SESSION['wybor1']['checkAll'][5]."`, `".$_SESSION['wybor1']['checkAll'][6]."` ,`".$_SESSION['wybor1']['checkAll'][7]."` FROM `pdane` WHERE `Test` = 2093";
    break;
    case 9: $zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."`, `".$_SESSION['wybor1']['checkAll'][2]."` ,`".$_SESSION['wybor1']['checkAll'][3]."`, `".$_SESSION['wybor1']['checkAll'][4]."` ,`".$_SESSION['wybor1']['checkAll'][5]."`, `".$_SESSION['wybor1']['checkAll'][6]."` ,`".$_SESSION['wybor1']['checkAll'][7]."`, `".$_SESSION['wybor1']['checkAll'][8]."` FROM `pdane` WHERE `Test` = 2093";
    break;
    case 10: $zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."`, `".$_SESSION['wybor1']['checkAll'][2]."` ,`".$_SESSION['wybor1']['checkAll'][3]."`, `".$_SESSION['wybor1']['checkAll'][4]."` ,`".$_SESSION['wybor1']['checkAll'][5]."`, `".$_SESSION['wybor1']['checkAll'][6]."` ,`".$_SESSION['wybor1']['checkAll'][7]."`, `".$_SESSION['wybor1']['checkAll'][8]."` ,`".$_SESSION['wybor1']['checkAll'][9]."` FROM `pdane` WHERE `Test` = 2093";
    break;
    case 11:$zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."`, `".$_SESSION['wybor1']['checkAll'][2]."` ,`".$_SESSION['wybor1']['checkAll'][3]."`, `".$_SESSION['wybor1']['checkAll'][4]."` ,`".$_SESSION['wybor1']['checkAll'][5]."`, `".$_SESSION['wybor1']['checkAll'][6]."` ,`".$_SESSION['wybor1']['checkAll'][7]."`, `".$_SESSION['wybor1']['checkAll'][8]."` ,`".$_SESSION['wybor1']['checkAll'][9]."`, `".$_SESSION['wybor1']['checkAll'][10]."` FROM `pdane` WHERE `Test` = 2093";
    break;
    case 12:$zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."`, `".$_SESSION['wybor1']['checkAll'][2]."` ,`".$_SESSION['wybor1']['checkAll'][3]."`, `".$_SESSION['wybor1']['checkAll'][4]."` ,`".$_SESSION['wybor1']['checkAll'][5]."`, `".$_SESSION['wybor1']['checkAll'][6]."` ,`".$_SESSION['wybor1']['checkAll'][7]."`, `".$_SESSION['wybor1']['checkAll'][8]."` ,`".$_SESSION['wybor1']['checkAll'][9]."`, `".$_SESSION['wybor1']['checkAll'][10]."` ,`".$_SESSION['wybor1']['checkAll'][11]."` FROM `pdane` WHERE `Test` = 2093";
    break;
    case 13:$zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."`, `".$_SESSION['wybor1']['checkAll'][2]."` ,`".$_SESSION['wybor1']['checkAll'][3]."`, `".$_SESSION['wybor1']['checkAll'][4]."` ,`".$_SESSION['wybor1']['checkAll'][5]."`, `".$_SESSION['wybor1']['checkAll'][6]."` ,`".$_SESSION['wybor1']['checkAll'][7]."`, `".$_SESSION['wybor1']['checkAll'][8]."` ,`".$_SESSION['wybor1']['checkAll'][9]."`, `".$_SESSION['wybor1']['checkAll'][10]."` ,`".$_SESSION['wybor1']['checkAll'][11]."`, `".$_SESSION['wybor1']['checkAll'][12]."`  FROM `pdane` WHERE `Test` = 2093";
    break;
    case 13:$zapytanie="`Sensor_No`, `".$_SESSION['wybor1']['checkAll'][0]."` ,`".$_SESSION['wybor1']['checkAll'][1]."`, `".$_SESSION['wybor1']['checkAll'][2]."` ,`".$_SESSION['wybor1']['checkAll'][3]."`, `".$_SESSION['wybor1']['checkAll'][4]."` ,`".$_SESSION['wybor1']['checkAll'][5]."`, `".$_SESSION['wybor1']['checkAll'][6]."` ,`".$_SESSION['wybor1']['checkAll'][7]."`, `".$_SESSION['wybor1']['checkAll'][8]."` ,`".$_SESSION['wybor1']['checkAll'][9]."`, `".$_SESSION['wybor1']['checkAll'][10]."` ,`".$_SESSION['wybor1']['checkAll'][11]."`, `".$_SESSION['wybor1']['checkAll'][12]."` ,`".$_SESSION['wybor1']['checkAll'][13]."` FROM `pdane` WHERE `Test` = 2093";
    break;

}
$query = "
  SELECT ".$zapytanie."";
$result = mysqli_query($link,$query);

// All good?
if ( !$result ) {
  // Nope
  $message  = 'Invalid query: ' . $link->error . "n";
  $message .= 'Whole query: ' . $query;
  die( $message );
}


// Print out rows
$data = array();
while ( $row = mysqli_fetch_assoc($result) ) {
  $data[] = $row;

}


echo json_encode( $data );



// Close the connection
mysqli_close($link);



// Set proper HTTP response headers
header( 'Content-Type: application/json' );


?>

虚线图截图:

Broken Charts

0 个答案:

没有答案