更改生成圖表的尺寸

以下代碼用於使用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(); 
    } 

?>

來源

2017-01-13 Sachini Karunaratne

你能在圖表生成後提供html代碼嗎？請使用chrome並按F12獲取html，如果您不知道如何獲取代碼。 –

您的代碼看起來不錯，對於使用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>

來源

2017-01-18 05:39:20 Prerana

更改生成圖表的尺寸

回答

相關問題