Php Array to line chart in ChartJs

问题

        $days = ["Monday","Tuesday","Wednesday"];
        $rates = [40,60,80];
        $profit = [];

        foreach($days as $day => $value){
            foreach($rates as $rate){
                $netprofit = $rate* 20;
                $profit[$value] = [$rate=> $netprofit];
            }

        }

        $usersChart = new UserChart;
        $usersChart->labels($days);
        foreach($profit as $key => $value){
            $data = array();
            foreach ($value as $values){
                $data[] = $values;
            }


            $usersChart->dataset($key, 'line', collect($data));
        }

I want to show this array into Chartjs Line Graph. I want the x axis to be the 40,60,80. Y axis to be 800, 1200, 1600. The Dataset or Lines should be Monday, Tuesday and Wednesday. Right now i get Monday, Tuesday and Wednesday as x axis and Line. 600,800 etc are on y axis.

Array
(
    [Monday] => Array
        (
            [40] => 800
            [60] => 1200
            [80] => 1600
        )

    [Tuesday] => Array
        (
            [40] => 800
            [60] => 1200
            [80] => 1600
        )

    [Wednesday] => Array
        (
            [40] => 800
            [60] => 1200
            [80] => 1600
        )

)

回答1:

keep your array as it is and convert it to JSON object and then echo it inside Javascript, javascript have to be inside php file to run, not in external javascript file.

notice that there is PHP code in this example and i have put <?php echo $json; ?> inside the javascript code.

<html>
    <head>
        <style>body{width: 800px;}</style>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    </head>
    <body>
        <div>
            <canvas  id="myChart" width="700px" height="300px"></canvas>
        </div>      
        <?php
            $array = array(600, 800, 1200, 1800);
            $json = json_encode($array);
        ?>
        <script>
            var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {
              // The type of chart we want to create
              type: 'line',

              // The data for our dataset
              data: {
                labels: ["20", "40", "60", "80"],
                datasets: [
                  {
                    label: 'Monday',
                    borderColor: "#FF9F40",
                    data: <?php echo $json; ?>,
                  },
                  {
                    label: 'Tuesday',
                    borderColor: "#FF6384",
                    data: [600, 800, 1200, 1800]
                  },
                  {
                    label: 'Wednesday',
                    borderColor: "#219151",
                    data: [600, 800, 1200, 1800]
                  }
                ]
              },

              // Configuration options go here
              options: {}
            });
        </script>
    </body>
</html>

来源：https://stackoverflow.com/questions/61503533/php-array-to-line-chart-in-chartjs

标签

javascript

php

arrays

charts

chart.js