Question

我正在用codeigniter框架实现一个应用程序，我想用Chart.JS生成图表，我有一个带有数据数组的控制器，并打算通过图形实现将它们发送到javascript文件，并显示其中的所有内容视图，但我无法传递数据。

控制器

 function index() {

        $data['DT'] = $this->Dashboard_main_model->get_dt_in();
        $data['CL'] = $this->Dashboard_main_model->get_cl_in();
        $data['MT'] = $this->Dashboard_main_model->get_mt_in();
        $data['SN_AU'] = $this->Dashboard_main_model->get_sn_au_in();
        $data['SN_AT'] = $this->Dashboard_main_model->get_sn_at_in();
        $data['SN_MR'] = $this->Dashboard_main_model->get_sn_mr_in();

        $data['DT_TMPs'] = $this->Dashboard_main_model->get_dt_tmp_in();
        $data['CL_TMPs'] = $this->Dashboard_main_model->get_cl_tmp_in();

        $data['_view'] = 'dashboard';
        $this->load->view('layouts/main', $data);

    }

JS文件teste.js

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

视图

  <div class="col-md-6">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">Chamadas Atendidas</h3>
      </div>
      <div class="box-body no-padding">
        <canvas id="myChart" style="auto;"></canvas>
      </div>
    </div>
  </div>
</div>

Answer 1

好吧，看来最好的选择是在您的服务器上本地安装Chart.min.js-我是从Github上获取的-链接位于chartjs.org网站（您显然拥有已经去过

下载并保存到适合您的设置的位置。

控制器-Chart.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Chart extends CI_Controller {

    public function __construct() {
        parent::__construct();
    }

    public function index() {
        $this->load->helper('url');
        $this->load->view('chart_view');
    }
}

视图-chart_view.php

<canvas id="myChart"></canvas>

// Load the Chart.min.js locally on the server
// Note: make sure you have application/config/config.php config['base_url'] correctly set.

<script src="<?=base_url('assets/chart/2.8.0/Chart.min.js');?>"></script>

<script type="application/javascript">
    let ctx = document.getElementById('myChart').getContext('2d');
    let myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

我看到了一个漂亮的小图表。看看是否适合您。

将chart.js与单个javascript文件集成

1 个答案: