个人中心
gpt4 book ai didi

javascript - 更改生成的图表的尺寸

转载 作者：行者123 更新时间：2023-11-29 11:04:31 25 4
gpt4 key购买 nike

以下代码用于使用 fusioncharts javascript 库生成条形图!尽管图表看起来太小并且与屏幕的左上角对齐!如何增加高度并使图形与屏幕中心对齐？

<?php

require_once("includes/db.php");

require("src/fusioncharts.php");


?>


<!-- You need to include the following JS file to render the chart.
When you make your own charts, make sure that the path to this JS file is correct.
Else, you will get JavaScript errors. -->

<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>

<?php

    // Form the SQL query that returns the top 10 most populous countries
    $sql = "Select count(Email) as Number,Date from reportorder GROUP BY date";

    // Execute the query, or else return the error message.
    $result =mysqli_query($db,$sql);

    // If the query returns a valid response, prepare the JSON string
    if ($result) {
        // The `$arrData` array holds the chart attributes and data
        $arrData = array(
            "chart" => array(
              "caption" => "Online orders on daily basis",
              "paletteColors" => "#0075c2",
              "bgColor" => "#ffffff",
              "borderAlpha"=> "50",
              "canvasBorderAlpha"=> "0",
              "usePlotGradientColor"=> "0",
              "plotBorderAlpha"=> "10",
              "showXAxisLine"=> "1",
               "xAxisName"=> "Date",
              "xAxisLineColor" => "#999999",
              "showValues" => "0",
              "divlineColor" => "#999999",
              "divLineIsDashed" => "1",
              "showAlternateHGridColor" => "0",
               "yAxisName"=> "Number of online orders"
            )
        );

        $arrData["data"] = array();

// Push the data into the array
        while($row = mysqli_fetch_array($result)) {
        array_push($arrData["data"], array(
            "label" => $row["Date"],
            "value" => $row["Number"]
            )
        );
        }

        /*JSON Encode the data to retrieve the string containing the JSON representation of the data in the array. */

        $jsonEncodedData = json_encode($arrData);

/*Create an object for the column chart using the FusionCharts PHP class constructor. Syntax for the constructor is ` FusionCharts("type of chart", "unique chart id", width of the chart, height of the chart, "div id to render the chart", "data format", "data source")`. Because we are using JSON data to render the chart, the data format will be `json`. The variable `$jsonEncodeData` holds all the JSON data for the chart, and will be passed as the value for the data source parameter of the constructor.*/

        $columnChart = new FusionCharts("column2D", "myFirstChart" , 600, 300, "chart-1", "json", $jsonEncodedData);

        // Render the chart
        $columnChart->render();

        // Close the database connection
        $db->close();
    }

?>

最佳答案

您的代码看起来不错，对于对齐使用CSS，对于渲染图表的div。

  <?php

    include("fusioncharts.php");
    $hostdb = "localhost";  // MySQl host
    $userdb = "root";  // MySQL username
    $passdb = "";  // MySQL password
    $namedb = "mscombi2d";  // MySQL database name
    $dbhandle = new mysqli($hostdb, $userdb, $passdb, $namedb);
    if ($dbhandle->connect_error) {
      exit("There was an error with your connection: ".$dbhandle->connect_error);
    }


    ?>

    <html>
       <head>
        <title>FusionCharts XT - Column 2D Chart - Data from a database</title>


        <!-- You need to include the following JS file to render the chart.
        When you make your own charts, make sure that the path to this JS file is correct.
        Else, you will get JavaScript errors. -->

        <script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
        <style type="text/css">
          #chart-1{
            width: 100%;
            text-align: center;
          }
        </style>
      </head>

      <body>
        <?php

        // Form the SQL query that returns the top 10 most populous countries
        $sql = "SELECT DISTINCT category, value1 FROM mscombi2ddata";

        // Execute the query, or else return the error message.
        $result = $dbhandle->query($sql) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}");

        // If the query returns a valid response, prepare the JSON string
        if ($result) {
            // The `$arrData` array holds the chart attributes and data
            $arrData = array(
                "chart" => array(
                  "caption" => "Online orders on daily basis",
                  "paletteColors" => "#0075c2",
                  "bgColor" => "#ffffff",
                  "borderAlpha"=> "50",
                  "canvasBorderAlpha"=> "0",
                  "usePlotGradientColor"=> "0",
                  "plotBorderAlpha"=> "10",
                  "showXAxisLine"=> "1",
                   "xAxisName"=> "Date",
                  "xAxisLineColor" => "#999999",
                  "showValues" => "0",
                  "divlineColor" => "#999999",
                  "divLineIsDashed" => "1",
                  "showAlternateHGridColor" => "0",
                   "yAxisName"=> "Number of online orders"
                )
            );

            $arrData["data"] = array();

      // Push the data into the array
          while($row = mysqli_fetch_array($result)) {
          array_push($arrData["data"], array(
              "label" => $row["category"],
              "value" => $row["value1"]
              )
          );
          }

          /*JSON Encode the data to retrieve the string containing the JSON representation of the data in the array. */

          $jsonEncodedData = json_encode($arrData);

      /*Create an object for the column chart using the FusionCharts PHP class constructor. Syntax for the constructor is ` FusionCharts("type of chart", "unique chart id", width of the chart, height of the chart, "div id to render the chart", "data format", "data source")`. Because we are using JSON data to render the chart, the data format will be `json`. The variable `$jsonEncodeData` holds all the JSON data for the chart, and will be passed as the value for the data source parameter of the constructor.*/

          $columnChart = new FusionCharts("column2D", "myFirstChart" , 600, 300, "chart-1", "json", $jsonEncodedData);

          // Render the chart
          $columnChart->render();

          // Close the database connection
          $dbhandle->close();
        }

      ?>

        <div id="chart-1">Fusion Charts will render here</div>

       </body>

    </html>

关于javascript - 更改生成的图表的尺寸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41626618/

25 4 0
文章推荐： iOS Tumblr 撰写 View
文章推荐： MySQL:将另一个表中的2行合并为一个结果行
文章推荐： java - 数据库无法以html格式存储
文章推荐： mysql - Nodejs Mysql 中的嵌套查询
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com