如何使用 highchart 在 Yii2 中构建查询并制作图表？答案

【问题标题】：How to build query and to make chart in Yii2 using highchart?如何使用 highchart 在 Yii2 中构建查询并制作图表？
【发布时间】：2017-03-21 09:43:34
【问题描述】：

我想从数据库中的表制作图表。我的数据库在 phpMyAdmin 上。这是我的桌子：

Table Hapus

我想在 Yii2 中做一个这样的图表：

我有 HighchartsController：

<?php
namespace app\controllers;

use yii\web\Controller;
use app\models\Hapus;
use yii\helpers\Json;


class HighchartsController extends Controller
{
     public function actionIndex()
    {

    $rows = (new \yii\db\Query())
    ->select(['Year'])
    ->from('hapus')
    ->limit(10)
    ->all();

    $rowsa = (new \yii\db\Query())
    ->select(['Female'])
    ->from('hapus')
    ->limit(10)
    ->all();

    $rowsaa = (new \yii\db\Query())
    ->select(['Male'])
    ->from('hapus')
    ->limit(10)
    ->all();

        $rows = [];
        $rowsa = [];
        $rowsaa= [];


        $data['year'] = json_encode($rows);
        $data['female'] = json_encode($rowsa);
        $data['male'] = json_encode($rowsaa);




        return $this->render('index',$data);
    }


}

这是我的观点 index.php

<?php
use app\assets\HighchartsAsset;


HighchartsAsset::register($this);
$this->title = 'Highcharts Test';
?>


<div class="container">
      <div class="row">
              <div class="col-md-6 col-sm-6 col-xs-12">
                <div class="x_panel">
                  <div id="my-chart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>



<?php $this->registerJs("
$(function () {
    $('#my-chart').highcharts({
        title: {
            text: 'Gender',
            x: -20 //center
        },

        xAxis: {
            categories: $year
        },
        yAxis: {
            title: {
                text: 'Total'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Male',
            data: $male
        }, {
            name: 'Female',
            data: $female
        }]
    });
});
")?>
</div>
</div>

当我尝试运行这些代码时，图表没有出现。是这样的：

调试控制台中没有错误。但是，我不知道为什么图表没有出现

谁能更正我的代码？提前谢谢你:)

【问题讨论】：

你为什么重复发布同样的问题????????
这不是同一个问题。我之前的问题没有高图代码，也没有我期望从那个问题得到答案@scaisEdge
你注册了 highcharts.js 库吗？在您的视图中，您的 html 容器#my-chart 在哪里？检查调试 js 控制台中的错误..
是的，我已经注册了 highchart.js 库。在我看来，我也使用 html 容器。上面的代码只是我的代码的一部分@MarcinGordel
js控制台有错误吗？

标签： php charts yii highcharts yii2

【解决方案1】：

在渲染视图之前您有一个空数组，并且图表中的数据也是空的：

$rows = [];
$rowsa = [];
$rowsaa= [];

并且在查询结果中，您的数组结构有误。

试试这个并使用column()而不是all()：

class HighchartsController extends Controller
{
    public function actionIndex()
    {

        $rows = (new \yii\db\Query())
            ->select(['Year'])
            ->from('hapus')
            ->limit(10)
            ->column();

        $rowsa = (new \yii\db\Query())
            ->select(['Female'])
            ->from('hapus')
            ->limit(10)
            ->column();

        $rowsaa = (new \yii\db\Query())
            ->select(['Male'])
            ->from('hapus')
            ->limit(10)
            ->column();

        $rowsa = array_map('floatval', $rowsa);
        $rowsaa = array_map('floatval', $rowsaa);

        $data['year'] = json_encode($rows);
        $data['female'] = json_encode($rowsa);
        $data['male'] = json_encode($rowsaa);

        return $this->render('index',$data);
    }
}

【讨论】：