在 ChartJs 中 PHP 数组到折线图答案

【问题标题】：Php Array to line chart in ChartJs在 ChartJs 中 PHP 数组到折线图
【发布时间】：2020-04-29 13:55:58
【问题描述】：

        $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));
        }

我想将此数组显示到 Chartjs 折线图中。我希望 x 轴为 40、60、80。 Y 轴为 800、1200、1600。数据集或行应为星期一、星期二和星期三。现在我将星期一、星期二和星期三作为 x 轴和线。 600,800 等在 y 轴上。

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
        )

)

【问题讨论】：

请提供更多代码，以了解您已经取得的成果
这是一个只有 html 和 javascript 的示例，如果它对您有帮助，请让我将其发布为答案。 jsfiddle.net/3oa1ukv7/3
@yoss 感谢您的回复。我看到您通过对值进行硬编码来很好地构建它。我有一个数组 $profit。我想通过循环遍历我的数组来动态创建图表。我将使用更多代码编辑我的问题以帮助您。请参见上文。
@yoss，你所做的正是我想要的。但我需要循环我的数组来获得这个结果，而不是硬编码这些值。我也在使用 Laravel Charts，它是 Chartjs 和其他库的 php 实现。

标签： javascript php arrays charts chart.js

【解决方案1】：

保持数组不变并将其转换为 JSON 对象，然后在 Javascript 中回显，javascript 必须在 php 文件中才能运行，而不是在外部 javascript 文件中。

请注意，此示例中有 PHP 代码，我已将 <?php echo $json; ?> 放入 javascript 代码中。

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

【讨论】：

谢谢。我的数组是一个多维数组。它包括标签：[]、标签：''和数据：[]。如何循环我的数组以获取值？我需要动态分配'标签：[]'，'标签：'''和数据：[]。数据集的数量也应该是动态的。请看我上面的数组。
你必须像 javascript 需要的那样将它们放在单独的数组中，或者选择数组项索引，你的代码并没有说明太多不幸
如果 javascript 中的数据必须是 [600, 800, 1200, 1800] 你应该创建一个这样的数组 (600, 800, 1200, 1800) 然后将其转换为 json 然后回显它在javascript中
我知道我必须在 javascript 中回显。我很清楚这一点。我的问题是如何为我的数组执行 for 循环并在需要的地方使用它。你看到了数组。现在我想使用 for 循环创建数据集。不对每个数据集 { } 进行硬编码。如果我的数组包含更多数据，例如星期四、星期五，我不想手动制作每个数据集和标签。如果您需要其他任何东西来理解问题，请询问。感谢您的宝贵时间
我不明白为什么你必须在数组中循环，你只需要从头开始制作干净的数组。请提供更多的php代码，