PHP - линейная диаграмма комбинированного массива - PullRequest
Новая
       111

PHP - линейная диаграмма комбинированного массива

0 голосов
/ 31 марта 2019

у меня есть массив; 

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

Можно ли как-нибудь составить эту таблицу? Какие у меня ошибки и что я могу сделать? Спасибо.

1 Ответ

1 голос
/ 31 марта 2019

Вы можете зациклить один массив и использовать ключ, чтобы получить элемент из другого массива.

Я создаю новый массив со всеми точками данных в формате строки, который вам нужен в качестве вывода, но я пропускаю запятую.
Когда цикл завершен, я добавляю выходной массив с запятой и новымлиния.

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