Question

我重新创建了此处显示的条形图 - https://canvasjs.com/javascript-charts/chart-with-secondary-axis/

我已经显示了所有数据，一切都运行良好但突然间我在代码中改变了一些导致条形消失的东西？当您将鼠标悬停在要显示条形图的区域上时，所有数据都会显示，但它们并不存在。有人可以帮帮我吗？

我的代码 -

＆＃13;

if (mysqli_connect_errno())
{
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
else
{
  // Print connection successful if no error
  echo "Connection still Successful </br>";
}


// Select all fields from the database
$sql = "SELECT * FROM TABLE_1";
$result = mysqli_query($con, $sql);

//echo var_dump($result);
// Check if database is not empty if not print data of each row

// create array
$emparray = array();
while($row = mysqli_fetch_assoc($result))
{
  $chart_gross .= "{label:'" .$row["Movie Title"]. "', y:'" .$row["Gross"]. "'},";
  $chart_votes .= "{label:'" .$row["Movie Title"]. "', y:'" .$row["Votes"]. "'},";
  $chart_data .= "{label:'" .$row["Movie Title"]. "', y:'" .$row["Votes"]. "'},";
}

//Close database connection
mysqli_close($con);
?>

＆＃13;

<html>
  <head>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <title> 2015 Movie Title Gross and Votes</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
   <div id="chartContainer" style="height: 75%; max-width: 80%; margin:0px auto;"></div>
   <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
   <script>
     window.onload = function () {
       var chart = new CanvasJS.Chart("chartContainer", {
         animationEnabled: true,
         title:{
           text: "Movie Title Votes and Gross, 2015"
         },	
         subtitles: [{
           text: "Click Legend to Hide or Unhide Data Series"
         }],
         axisY: {
           title: "Votes",
           titleFontColor: "#4F81BC",
           lineColor: "#4F81BC",
           labelFontColor: "#4F81BC",
           tickColor: "#4F81BC"
         },
         axisY2: {
           title: "Gross",
           titleFontColor: "#C0504E",
           lineColor: "#C0504E",
           labelFontColor: "#C0504E",
           tickColor: "#C0504E"
         },	
         toolTip: {
           shared: true
         },
         legend: {
           cursor:"pointer",
           itemclick: toggleDataSeries
         },
         data: [
           {
             type: "column",
             name: "Gross",
             showInLegend: true, 
             legendText: "Gross",
             yValueFormatString: "#,##0.# Units",
             dataPoints:[<?php echo $chart_gross;?>]
           },
           {
             type: "column",	
             name: "Votes",
             legendText: "Votes",
             axisYType: "secondary",
             showInLegend: true,
             yValueFormatString: "#,##0.# Units",
             dataPoints:[ <?php echo $chart_votes; ?>]
           }
         ]
       });

       chart.render();

       function toggleDataSeries(e) {
         if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
           e.dataSeries.visible = false;
         }
         else {
           e.dataSeries.visible = true;
         }

         chart.render();
       }
     }
   </script>

</body>
</html>

＆＃13;

javascript条形图栏没有显示

0 个答案: