FusionCharts 组合图表 MySQL
问题描述 投票：0回答：2
我被要求创建一个具有 2 个 Y 轴和 1 条线的组合图表（根据文档 (http://www.fusioncharts.com/dev/chart-attributes.html?chart=mscolumn3dlinedy)，mscolumn3dlinedy）可以从 MySQL 检索数据，但我很难做到这一点。在 FusionCharts 文档中，有使用 MySQL 和 PHP 制作图表的示例，但唯一的示例涉及 2d 柱形图，其结构非常简单。
我的问题是在该示例中（http://www.fusioncharts.com/dev/using-with-server-side-languages/php/creating-charts-with-data-from-a-database.html ），他们使用 while 迭代器将 MySQL 数据放入数组中，并查看我必须制作的组合图表，它应该使用更多数组，或者至少我是这么认为的。所以我真的不知道如何制作这个特定的图表。
我有一个包含 6 个字段的表： DT（数据时间） TP（整数值） OPEN_AMT（整数值） IN_AMT（空） OUT_AMT（空） END_AMT（整数值）
图表必须看起来像
我得到的图表是这个
它是空的，但我正在从数据库获取数据。如果您查看我页面的源代码，您会发现图表的结构有点混乱，但数据就在那里。 （http://sisfacil.cl/securestart/graficos.php
我一直在尝试查看文档，但找不到任何对我有帮助的内容。
图表的代码是这样的
<?php
$stmt = "SELECT * FROM datos_grafico_01
WHERE year(DT)=2016
AND month(DT)=3";
$result = $mysqli->query($stmt) or exit("Error code ({$mysqli->errno}): {$mysqli->error}");
if ($result) {
$arrData = array(
"chart" => array(
"caption" => "Merchandise",
"xAxisname" => "Días de Marzo",
"pYAxisName" => "$",
"sYAxisName" => "$",
"numberPrefix" => "$",
"sNumberSuffix" => "$",
"sYAxisMaxValue" => "6000000000",
"paletteColors" => "#0075c2,#1aaf5d,#f2c500",
"bgColor" => "#ffffff",
"showBorder" => "0",
"showCanvasBorder" => "0",
"usePlotGradientColor" => "0",
"plotBorderAlpha" => "10",
"legendBorderAlpha" => "0",
"legendBgAlpha" => "0",
"legendShadow" => "0",
"showHoverEffect" => "1",
"valueFontColor" => "#ffffff",
"rotateValues" => "1",
"placeValuesInside" => "1",
"divlineColor" => "#999999",
"divLineDashed" => "1",
"divLineDashLen" => "1",
"divLineGapLen" => "1",
"canvasBgColor" => "#ffffff",
"captionFontSize" => "14",
"subcaptionFontSize" => "14",
"subcaptionFontBold" => "0"
)/*
"categories" => array(
"category" => array(
"label" => "2",
"label" => "3",
"label" => "4",
"label" => "5",
"label" => "6",
"label" => "7",
"label" => "8",
"label" => "9",
"label" => "10",
"label" => "11",
"label" => "12",
"label" => "13",
"label" => "14",
"label" => "15",
"label" => "16",
"label" => "17",
"label" => "18",
"label" => "19",
"label" => "20",
"label" => "21",
"label" => "22",
"label" => "23",
"label" => "24",
"label" => "25",
"label" => "26",
"label" => "27",
"label" => "28",
"label" => "29",
"label" => "30",
"label" => "31"
)
)*/
);
$arrData["categories"] = array();
$cat["category"] = array();
//Vaciar los datos de mysql en el arreglo
while($row = mysqli_fetch_array($result)) {
array_push($cat["category"], array(
"label" => $row["DT"]
)
);
}
array_push($arrData["categories"], array(
$cat["category"]
)
);
$arrData["dataset"] = array();
$data1["data"] = array();
$data2["data"] = array();
$data3["data"] = array();
//Vaciar los datos de mysql en el arreglo
while($row = mysqli_fetch_array($result)) {
array_push($data1["data"], array(
"value" => $row["IN_AMT"]
)
);
array_push($data2["data"], array(
"value" => $row["OUT_AMT"]
)
);
array_push($data3["data"], array(
"value" => $row["END_AMT"]
)
);
}
array_push($arrData["dataset"], array(
"seriesname" => "INT_AMT",
$data1["data"],
"seriesname" => "OUT_AMT",
$data2["data"],
"seriesname" => "END_AMT",
"renderAs"=> "line",
"parentYAxis"=> "S",
"showValues"=> "0",
$data3["data"]
)
);
$jsonEncodedData = json_encode($arrData);
$myChart = new FusionCharts("mscolumn3dlinedy", "MySQLChart", 800, 600, "chartContainer", "json", $jsonEncodedData);
$myChart->render();
$mysqli->close();
}
?>
请注意，当我使用数组从下面的数据库中检索第一个类别部分时，它已被注释。
我不是编程方面的专家，所以我可以使用任何帮助，特别是图表的结构和代码制作。
例如，数据集部分的结构应该如下所示：
"dataset": [
{
"seriesname": "Food Products",
"data": [
{
"value": "11000"
},
{
"value": "14000"
},
{
"value": "10500"
},
{
"value": "15000"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [
{
"value": "14400"
},
{
"value": "14800"
},
{
"value": "8300"
},
{
"value": "11800"
}
]
},
{
"seriesname": "Profit %",
"renderAs": "line",
"parentYAxis": "S",
"showValues": "0",
"data": [
{
"value": "14"
},
{
"value": "16"
},
{
"value": "15"
},
{
"value": "17"
}
]
}
但是我的，渲染图表时只显示类似的内容
"dataset":[{"seriesname":"END_AMT","0":[],"1":[],"renderAs":"line","parentYAxis":"S","showValues":"0","2":[]}]}});
});
那么。如果这是一篇 TL;DR 文本……你们中的一些人可能会要求简化我的问题。将会是：
我做错了什么，当我渲染组合图表时，结构变得混乱并且无法正确加载？
如果您需要一些简短的提示来指出
- 我正在从 MySQL 检索数据。 （见源代码）
- 我不擅长数组（可能也不擅长一般编程）
- FusionChart 文档没有任何 MySQL 的多重/组合图表示例
- 我认为问题出在我制作的数组上。
编辑：
我已经成功解决了这个问题。我刚刚添加了 array_value 来提取 array_push 上的值。
<?php
$stmt = "SELECT DAY(DT) as DT, IN_AMT, OUT_AMT, END_AMT FROM datos_grafico_01 WHERE year(DT)=2016 AND month(DT)=3 ORDER BY DT ASC";
$result = $mysqli->query($stmt) or exit("Error code ({$mysqli->errno}): {$mysqli->error}");
if ($result) {
$arrData = array(
"chart" => array(
"caption" => "Merchandise",
"xAxisname" => "Días de Marzo",
"pYAxisName" => "$",
"sYAxisName" => "$",
"numberPrefix" => "$",
"sNumberSuffix" => "$",
"paletteColors" => "#0075c2,#1aaf5d,#f2c500",
"bgColor" => "#ffffff",
"showBorder" => "0",
"showCanvasBorder" => "0",
"usePlotGradientColor" => "0",
"plotBorderAlpha" => "10",
"legendBorderAlpha" => "0",
"legendBgAlpha" => "0",
"legendShadow" => "0",
"showHoverEffect" => "1",
"valueFontColor" => "#ffffff",
"rotateValues" => "1",
"placeValuesInside" => "1",
"divlineColor" => "#999999",
"divLineDashed" => "1",
"divLineDashLen" => "1",
"divLineGapLen" => "1",
"canvasBgColor" => "#ffffff",
"captionFontSize" => "14",
"subcaptionFontSize" => "14",
"subcaptionFontBold" => "0"
)
);
$arrData["categories"] = array();
$cat["category"] = array();
$arrData["dataset"] = array();
$data1["data"] = array();
$data2["data"] = array();
$data3["data"] = array();
//Vaciar los datos de mysql en el arreglo
while($row = mysqli_fetch_array($result)) {
array_push($cat["category"], array(
"label" => $row["DT"]
)
);
array_push($data1["data"], array(
"value" => $row["IN_AMT"]
)
);
array_push($data2["data"], array(
"value" => $row["OUT_AMT"]
)
);
array_push($data3["data"], array(
"value" => $row["END_AMT"]
)
);
}
array_push($arrData["categories"], array(
"category" => array_values($cat["category"])
)
);
array_push($arrData["dataset"], array(
"seriesname" => "IN_AMT",
"data" => array_values($data1["data"])
)
);
array_push($arrData["dataset"], array(
"seriesname" => "OUT_AMT",
"data" => array_values($data2["data"])
)
);
array_push($arrData["dataset"], array(
"seriesname" => "END_AMT",
"renderAs"=> "line",
"parentYAxis"=> "S",
"showValues"=> "0",
"data" => array_values($data3["data"])
)
);
$jsonEncodedData = json_encode($arrData);
$myChart = new FusionCharts("mscolumn3dlinedy", "MySQLChart", 1200, 1000, "chartContainer", "json", $jsonEncodedData);
$myChart->render();
$mysqli->close();
}
?>
它起作用了。另外，我必须更改代码的顺序并简化它，因为我有超过 1 while。不管怎样，图表看起来很糟糕，但那是因为表格中的数据一团糟。
2个回答
0
投票
投票
您可以参考使用 PHP-MySQL 创建的多系列图表示例：https://www.dropbox.com/s/ruk3hth9xs6ejou/mschart_php-sql.rar?dl=0
这将帮助您格式化 JSON 数据，并且对于图表类型的组合，您必须添加相关属性。
0
投票
投票
FusionCharts 以标签值对列表的形式使用图表数据。如果查询返回行/数据，我们将该数据转换为关联数组。关联数组就像任何其他数组一样，但它使用键来存储数组元素的值来代替索引。下面是处理$result对象中数据的实现：
<?php
//initialize the array to store the processed data
$jsonArray = array();
//check if there is any data returned by the SQL Query
if ($result->num_rows > 0) {
//Converting the results into an associative array
while($row = $result->fetch_assoc()) {
$jsonArrayItem = array();
$jsonArrayItem['label'] = $row['player'];
$jsonArrayItem['value'] = $row['wickets'];
//append the above created object into the main array.
array_push($jsonArray, $jsonArrayItem);
}
}
?>
这是示例代码-
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'mscombidy2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
//Cosmetics
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"usePlotGradientColor": "0",
"anchorRadius": "3",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}],
"dataset": [{
"seriesName": "Revenues",
"data": [{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "15000"
},
{
"value": "21000"
},
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "17000"
},
{
"value": "22000"
},
{
"value": "19000"
},
{
"value": "23000"
}
]
},
{
"seriesName": "Profits",
"renderAs": "area",
"showValues": "0",
"data": [{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "7000"
},
{
"value": "1000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "7000"
}
]
},
{
"seriesName": "Profit %",
"parentYAxis": "S",
"renderAs": "line",
"showValues": "0",
"data": [{
"value": "25"
},
{
"value": "25"
},
{
"value": "16.66"
},
{
"value": "21.05"
},
{
"value": "6.66"
},
{
"value": "33.33"
},
{
"value": "6.25"
},
{
"value": "25"
},
{
"value": "5.88"
},
{
"value": "36.36"
},
{
"value": "10.52"
},
{
"value": "30.43"
}
]
}
]
}
});
revenueChart.render();
});
演示小提琴 - https://jsfiddle.net/fusioncharts/S52bN/
文档参考 - https://www.fusioncharts.com/dev/using-with-server-side-languages/tutorials/php-mysql-charts
最新问题
- 连接 MySQL 中的两个表，从第一个表中选择随机行
- 如何在 Docker-Compose 中一起使用主机网络和任何其他用户定义的网络？
- 如何在移动应用程序中进行视频修剪和合并性能？ [已关闭]
- 我如何知道我正在使用哪个版本的 sakila 数据库？
- django 从管理面板上传的图像未显示在主页中
- 为什么在 multiprocessing/process.py 中为类 BaseProcess(object) 的 `_parent_pid` 和 `_parent_name` 属性分配当前信息？
- 需要什么 XSLT 来提取和转换这个特定的 XHTML？
- Vs code android 模拟器无法与 flutter 配合使用
- C 中使用 malloc 和 realloc 进行动态内存分配 [重复]
- 代码_tkinter.TclError中的错误：错误的窗口路径名“.!button4”
- 使用 std::backtrace 构建 cpp 代码引发错误“对 `__glibcxx_backtrace_create_state 的未定义引用”
- 为什么必须对这个参数进行硬编码才能在 TypeScript 中工作？
- 按下 HTML 输入按钮时执行 JS 代码
- 计算在职员工的年龄
- 使用“sleep infinity”时无法捕获 SIGINT 和 SIGTERM
- 如何使用 DateToolsSwift 添加日期？
- 如何使用pytorch Lightning进行多节点训练
- 点击下拉菜单外部后触发工具提示
- 如何在成员函数作用域内定义成员函数？
- 将私有端点链接到私有 DNS 区域 Terraform
© www.soinside.com 2019 - 2024. All rights reserved.