PHP - 组合数组的折线图答案

【问题标题】：PHP - Line Chart of a Combined ArrayPHP - 组合数组的折线图
【发布时间】：2019-03-31 15:11:45
【问题描述】：

我有一个数组；

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

有什么方法可以制作这个图表吗？我的错误是什么，我能做什么？谢谢。

【问题讨论】：

与您的问题无关，但"800":800 是否表示它是一个 json 字符串且键为 800 且值为 800？这听起来是个不好的做法。 PHP 中的数组只能有一个名为 800 的键，因此如果您的行返回到 800，那么您的数据不正确/被操纵。
很抱歉，我无法理解问题所在。我通过组合两个数组找到了该数据。我编辑了我的问题并显示了这两个数组，您可以在那里查看
我从您的数组中取出前三个项目并查看结果：3v4l.org/DZtCf 只剩下两个项目。 Array_combine 需要唯一键。看看它是如何删除您的一个数据点的。

标签： php graph charts linechart linegraph

【解决方案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>

【讨论】：

非常感谢安德烈亚斯！这就是我需要的。
你能检查一下我与canvasjs相关的新question吗？
打印为空白。