Question

我有一个数组；

$arrgraph={"800":800,"1650":850,"2450":800,"3200":750,"4300":1100,"5250":950,"6200":950,"7150":950,"8000":850}

我从这2个数组中找到了array_combine这个数组：

$arr=array(800,850,800,750,950,1100,950,950,850);
$x=array(800,1650,2450,3200,4300,5250,6200,7150,8000);

我想在线图上显示此数组。但是我做不到。

我尝试过，但是在本地主机页面上什么都没出现。

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var data = <?php echo json_encode($arrgraph, JSON_NUMERIC_CHECK); ?>;

data = data.map(function (row, index) {
    return {
        x: index,
        y: row
    };
});

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Analysis"
    },
    axisY: {
        title: "Variables"
    },
    axisX: {
        title: "Sample"

    },
    data: [{
        type: "line",

        dataPoints: data
    }]
});
chart.render();

}

</script>
</head>
<body>

<div id="chartContainer" style="height: 250px; width: 50%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

有人告诉我，我可以使用此代码并使用'foreach'进行数据指向，但我也做不到，因为我对php有点了解。

<!DOCTYPE HTML>
<html>
<head>  
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
      text: "Multi-Series Line Chart"  
      },
      data: [
      {        
        type: "line", //you can echo php array here as dataPoints variable
        dataPoints: [
        { x: 10, y: 21 },
        { x: 20, y: 25},
        { x: 30, y: 20 },
        { x: 40, y: 25 },
        { x: 50, y: 27 },
        { x: 60, y: 28 },
        { x: 70, y: 28 },
        { x: 80, y: 24 },
        { x: 90, y: 26}

        ]
      }
      ]
    });

    chart.render();
  }
  </script>
 <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>

有什么方法可以制作此图表？我有什么错误，该怎么办？谢谢。

Answer 1

您可以循环一个数组，然后使用键从另一个数组中获取项目。

我创建了一个新数组，其中所有数据点都以您需要作为输出的字符串格式出现，但是我省略了结尾的逗号。
循环完成后，我用逗号和换行将输出数组内爆。

<!DOCTYPE HTML>
<html>
<head>  
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
      text: "Multi-Series Line Chart"  
      },
      data: [
      {        
        type: "line", //you can echo php array here as dataPoints variable
        dataPoints: [

<?PHP
    foreach($arr as $key => $v){
        $output[] = "{ x: " . $x[$key] . ", y: " . $v . " }";
    }
    echo implode(",\n", $output);
?>


        ]
      }
      ]
    });

    chart.render();
  }
  </script>
 <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>

PHP-组合数组的折线图

1 个答案: