PHP - 组合数组的折线图

问题描述 投票:0回答:1

我有一个阵列;

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

我从这两个数组中找到了array_combine的这个数组:

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

我想在折线图上显示这个数组。但我不能这样做。

我尝试了这个,但localhost页面上没有出现任何内容。

<!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>

有什么方法可以制作这张图表吗?我的错误是什么,我该怎么办?谢谢。

php graph charts linechart linegraph
1个回答
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.