gpt4 book ai didi

javascript - 如何从 JSON 数据创建 C3 图表线图?

转载 作者:行者123 更新时间:2023-12-03 06:16:45 24 4
gpt4 key购买 nike

我需要学校项目的帮助。我已经能够将数据从 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 );

最佳答案

您需要创建两个单独的数组,一个用于您的数据,另一个用于您想要在 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>

关于javascript - 如何从 JSON 数据创建 C3 图表线图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39072212/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com