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（整数值）

图表必须看起来像
this

我得到的图表是这个

它是空的，但我正在从数据库获取数据。如果您查看我页面的源代码，您会发现图表的结构有点混乱，但数据就在那里。 （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。不管怎样，图表看起来很糟糕，但那是因为表格中的数据一团糟。

php mysql arrays charts fusioncharts
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

https://www.fusioncharts.com/dev/chart-guide/standard-charts/combination-charts#2d-dual-y-axis-combination-chart

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.