Question

我正在动态制作一个面积图，因为我想动态设置Data数组。我创建了变量并将其分配给得分，我在下面给出了示例

$dataPoints = '30, 10, 40, 20, 30, 10, 50, 30, 30, 30, 40';

var dataPoints1 = '<?php echo $dataPoints; ?>';

var areaChart = c3.generate({
        bindto: '#area-chart',
        data: {
            columns: [
                ['Score', dataPoints1]
            ],
            
            types: {
                data1: 'area',
                Score: 'area-spline'
            }
        },
        tooltip: {
            show: true
        },
        legend: {
            show: false
        },
        axis: {
            x: {
                show: false
            },
            y: {
                show: false
            },
        },
        grid:{
            focus:{
                show:false
            }         
        }  
    });

但是此脚本无法正常工作，并且不会显示图形，并且如果我静态设置此值，它将可以正常工作。

有人可以帮我吗...

Answer 1

与其将php字符串提取到js变量中，不如直接将php字符串传递到列中，它将起作用

var areaChart = c3.generate({
    bindto: '#area-chart',
    data: {
        columns: [
            ['Score', <?php echo $dataPoints; ?>] // use php variable directly
        ],

        types: {
            data1: 'area',
            Score: 'area-spline'
        }
    },
    tooltip: {
        show: true
    },
    legend: {
        show: false
    },
    axis: {
        x: {
            show: false
        },
        y: {
            show: false
        },
    },
    grid:{
        focus:{
            show:false
        }         
    }  
});

不需要dataPoints1 js变量。

编辑

在这种情况下

在php中，我认为ajax，

$dataPoints["Score"] = [30, 10, 40, 20, 30, 10, 50, 30, 30, 30, 40];
echo json_encode($dataPoints); die;

在JS中

var chart = c3.generate({
    bindto: '#area-chart',
    data: {
        url: 'your url to fetch above data',
        mimeType: 'json',
        types: {
            data1: 'area',
            Score: 'area-spline'
        }
    },
    tooltip: {
        show: true
    },
    legend: {
        show: false
    },
    axis: {
        x: {
            show: false
        },
        y: {
            show: false
        },
    },
    grid: {
        focus: {
            show: false
        }
    }
});

这应该可以解决您的问题

Answer 2

我以您的代码为例，并尝试使用数据库连接和示例表数据来修改代码。

请尝试一下，希望对您有用。

文件（PHP + HTML + jQuery）

<?php
  $servername = "localhost"; // Change with your server name
  $username = "root"; // Change with your user name
  $password = ""; // // Change with your password
  $dbname = "test"; // // Change with your database name

  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  // Check connection
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  } 

  $sql = "SELECT data FROM users"; // // Change with your table name
  $result = $conn->query($sql);

  $dataPoints = '';
  if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $dataPoints .= $row['data'];
        $dataPoints .= ',';
    }
    rtrim($dataPoints);
    echo $dataPoints;
  } else {
    echo "0 results";
  }
  $conn->close();
?>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>C3.js</title>
  <style type="text/css">
    body{
      text-align: center; 
    }

  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
</head>
<body>
  <div class="container">
    <h1>Graphs made easy</h1>
    <div id="chart"></div>
  </div>
  <script type="text/javascript">

    var dataPoints1 = ["Score", <?php echo $dataPoints;?>];
    console.log('dataPoints : ', <?php echo $dataPoints;?>);
    console.log('data2 : ', dataPoints1);

    var areaChart = c3.generate({
      bindto: '#chart',
      data: {
        columns: [
            dataPoints1
        ],

        types: {
            data1: 'area',
            Score: 'area-spline'
        }
      },
      tooltip: {
        show: true
      },
      legend: {
        show: false
      },
      axis: {
        x: {
            show: false
        },
        y: {
            show: false
        },
      },
      grid:{
        focus:{
            show:false
        }         
      }  
    });
</script>
</body>
</html>

输出

在面积图中设置动态图

2 个答案: