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

Question

我正在用 codeigniter 框架实现一个应用程序，我想用 Chart.JS 生成图表，我有一个 Controller 和一个包含数据的数组，我打算用图形实现将它们发送到 javascript 文件，并显示所有内容 View ，但我无法传递数据。

Controller

 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 网站上(你显然有已经去过了)

下载它并将其保存在适合您的设置的位置。

Controller - 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');
    }
}

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>

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