Интеграция chart.js с одним файлом javascript

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

И у меня появился симпатичный маленький график.Посмотрите, работает ли это для вас.