如何根据 JSON 数据创建 C3 图表折线图？

Question

我需要学校项目的帮助。我已经能够将数据从 mySQL 数据库提取到数组中并编码到 JSON 中，显示效果很好。现在，我需要帮助将 JSON 数据传递给 C3 以生成图表（如果可能的话在同一页面上）。

到目前为止我做了什么：

$strQuery = "SELECT production_date,oil FROM  production WHERE well = '$h_well' AND production_date BETWEEN '$h_start' AND '$h_end' ORDER BY production_date ASC";
$result = mysqli_query($conn, $strQuery);

// Print out rows
$data = array();
while ( $row = $result->fetch_assoc() ) {
    $data[] = $row;
}
echo json_encode( $data );

Answer 1

您需要创建两个单独的数组，一个用于数据，一个用于要在 x 轴上显示的日期，然后将该数组传递给 java 脚本。

这里是完整的工作示例

<?php

$conn = mysqli_connect("localhost", "root", "", "test_db");

// Check connection
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$strQuery = "SELECT production_date,oil FROM  production WHERE well = '$h_well' AND production_date BETWEEN '$h_start' AND '$h_end' ORDER BY production_date ASC";
$result = mysqli_query($conn, $strQuery);

// Print out rows
$valuesArray = array();
$datesArray = array();

$valuesArray[] = 'Oil';
$datesArray[] = 'x';
while ($row = $result->fetch_assoc()) {
    $datesArray[] = $row['production_date'];
    $valuesArray[] = $row['oil'];
}
?>


<html>
    <head>
        <title>C3 Liner example</title>
        <link href="c3_scr/c3.css" rel="stylesheet" type="text/css" />
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="c3_scr/c3.js"></script><!-- load jquery -->


    </head>
    <body>
        <div id="chart"></div>
        <script>
            var xAxisArr = <?php echo json_encode($datesArray); ?>;
            var dataArr = <?php echo json_encode($valuesArray, JSON_NUMERIC_CHECK); ?>;
            var chart = c3.generate({
                bindto: '#chart',
                data: {
                    x: 'x',
                    columns: [
                        xAxisArr,
                        dataArr
                    ]
                },
                axis: {
                    x: {
                        type: 'timeseries',
                        tick: {
                            format: '%Y-%m-%d'
                        }
                    }
                }
            });
        </script>
    </body>
</html>

如何根据 JSON 数据创建 C3 图表折线图？

How do I create a C3 Chart Line Graph from JSON data?

javascript

php

json

c3.js