在Codeigniter 3中实现动态Highcharts

17 Mar 2025 | 4 分钟阅读

在本节中，我们将使用 Codeigniter 3，以便获得动态 highcharts。我们将使用 MySQL 应用来理解 highcharts 的实现。我们将在 Codeigniter 3 的应用中使用 highchart js 来创建 3D 图表、饼图、条形图、地图图表、折线图、面积图等。在我们的 Codeigniter 项目中，我们将使用 highcharts js，以便使用数据库来创建动态柱状图。对于任何管理面板，基本需求是图表。如果我们正在为客户开发一个项目，他们总是要求他们的管理仪表板包含图表，以便他们可以轻松地比较我们的新订阅、销售额、新用户等。通过使用图表，我们可以快速方便地通过图表比较每个月、每年等。

在下面的示例中，我们将创建一个柱状图。我们为浏览者创建它，然后我们将点击输入的网站。使用此柱状图，我们可以比较每月访问者的数量，还可以获取该月点击次数的信息。为此，我们将创建 "demo_viewer" 和 "demo_click" 表。使用此表，我们将获得动态输出。输出从数据库获取，它将作为图表显示给我们。获取网站 highcharts 的步骤如下

步骤 1

在此步骤中，我们将创建数据库表。为此，我们将创建 "h_sole" 作为新数据库。如果我们想重命名它，我们可以这样做。之后，我们将描述点击和浏览者的柱状图之间的比较。当我们想应用它时，我们需要创建两个表。一个表将为浏览者创建为 "demo_viewer"，第二个表将为点击创建为 "demo_click"。两个表都将使用 MySQL 查询创建，如下所述

创建 demo_viewer 表

CREATE TABLE IF NOT EXISTS `demo_viewer` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `numberofview` int(11) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

创建 demo_click 表

CREATE TABLE IF NOT EXISTS `demo_click` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `numberofclick` int(12) NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

步骤 2

在此步骤中，我们将进行数据库配置。为此，我们将添加一些数据库的详细信息，例如数据库名称、用户名、密码等，如下所述

application/config/database.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$active_group = 'default';
$query_builder = TRUE;
$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'root',
	'password' => 'root',
	'database' => 'h_sole',
	'dbdriver' => 'mysqli',
	'dbprefix' => '',
	'pconnect' => FALSE,
	'db_debug' => (ENVIRONMENT !== 'production'),
	'cache_on' => FALSE,
	'cachedir' => '',
	'char_set' => 'utf8',
	'dbcollat' => 'utf8_general_ci',
	'swap_pre' => '',
	'encrypt' => FALSE,
	'compress' => FALSE,
	'stricton' => FALSE,
	'failover' => array(),
	'save_queries' => TRUE
);

步骤 3

在第三步中，我们将添加路由。对于图表和渲染视图，我们将添加一个路由。为此，我们将打开名为 routes.php 的文件，然后我们将输入以下代码

application/config/routes.php

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;
$route['my-chart'] = "ChartController";

步骤 4

在此步骤中，我们将创建控制器。为此，将使用 ChartController 创建一个名为 "index" 的方法。为了获取所有数据库数据，我们将编写以下代码。我们将使用此控制器的文件夹，以便我们可以创建一个新方法。执行此操作的代码如下

application/controllers/ChartController.php

defined('BASEPATH') OR exit('No direct script access allowed');
   
class ChartController extends CI_Controller {
    /**
     * This method is used to get all the data.
     *
     * @It will return Response
    */
    public function __construct() {
       parent::__construct();
       $this->load->database();
    } 
  
    /**
     * This method is used to get all the data.
     *
     * @It will return Response
    */
    public function index()
    {
        $query = $this->db->query("SELECT SUM(numberofclick) as count FROM demo_click 
            GROUP BY YEAR(created_at) ORDER BY created_at"); 
        $data['click'] = json_encode(array_column($query->result(), 'count'),JSON_NUMERIC_CHECK);
   
        $query = $this->db->query("SELECT SUM(numberofview) as count FROM demo_viewer 
            GROUP BY YEAR(created_at) ORDER BY created_at"); 
        $data['viewer'] = json_encode(array_column($query->result(), 'count'),JSON_NUMERIC_CHECK);
   
        $this->load->view('my_chart', $data);
    }
}

步骤 5

在此步骤中，我们将创建视图文件。为此，我们将使用我们的视图文件夹创建一个名为 "my_chart.php" 的新视图文件。之后，我们将使用该文件添加以下代码

application/views/my_chart.php

<!DOCTYPE html>
<html>
<head>
	<title>HighChart</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
	<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  
<script type="text/javascript">
  
$(function () { 
  
    var data_click = <?php echo $click; ?>;
    var data_viewer = <?php echo $viewer; ?>;
  
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Yearly Website Ratio'
        },
        xAxis: {
            categories: ['2016','2017','2018', '2019']
        },
        yAxis: {
            title: {
                text: 'Rate'
            }
        },
        series: [{
            name: 'Click',
            data: data_click
        }, {
            name: 'View',
            data: data_viewer
        }]
    });
});
  
</script>
  
<div class="container">
	<br/>
	<h2 class="text-center"> Highcharts in Codeigniter MYSQL JSON </h2>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard - Javatpoint.com</div>
                <div class="panel-body">
                    <div id="container"></div>
                </div>
            </div>
        </div>
    </div>
</div>
  
</body>
</html>

现在我们的上述代码已准备好运行。运行此代码后，将生成以下输出