使用codeigniter mysql 2创建highcharts多系列区域图折线图

时间:2018-07-29 12:09:17

标签: javascript php mysql codeigniter highcharts

这是我的模态

这是第一个系列查询

function student_reports(){
    $this->db->select('monthname(a.view_date) as name, count(a.report_id) as 
    data');
    $this->db->from('report_view_track a');
    $this->db->where('a.user_id', 1);
    $this->db->where('a.preview_mode', "report");
    $this->db->group_by('monthname(view_date)');
    $this->db->order_by('a.id', 'ASC');
    $query = $this->db->get();
}

这是结果:

----------------------
|date        | count |
----------------------
|2018-01-12  | 80    |
|2018-02-12  | 100   |
|2018-03-12  | 20    |
|2018-04-12  | 60    |
|2018-05-12  | 50    |
|2018-06-12  | 50    |
|2018-07-12  | 50    |

第二个查询结果是相同格式的不同计数

第二系列查询

function parents_reports(){
    $this->db->select('monthname(a.view_date) as name, count(a.report_id) as 
    data');
    $this->db->from('report_view_track a');
    $this->db->where('a.user_id', 2);
    $this->db->where('a.preview_mode', "report");
    $this->db->group_by('monthname(view_date)');
    $this->db->order_by('a.id', 'ASC');
}

这是控制器

public function get_mainarray() {
    $this->load->model('admin_model');  
    $main_array = $this->admin_model->student_reports();
    echo json_encode($main_array,JSON_NUMERIC_CHECK);
}

public function get_mainarray1() {
    $this->load->model('admin_model');  
    $main_array= $this->admin_model->parents_reports();
    echo json_encode($main_array,JSON_NUMERIC_CHECK);
}

这是视图

<script>
$(function () {
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({

    chart : {
      renderTo : 'chart-contents',
      type : 'spline',
      animation: Highcharts.svg,
      marginTop: 100,
      style: {
           fontFamily: 'Open Sans'
       },         
      backgroundColor : {

      }    
    },
    title : {
        text : 'Number of Report views',
        align: 'left',
        style: {
           fontFamily: 'Poppins',
           fontSize: '15',
           fontWeight: '600'
        },   
        x: 0,
        y: 5          
    },
    subtitle : {
        text : 'An example of irregular time data in Highcharts JS',
        align: 'left',
        x: 0,
        y: 30             
    },
    legend: {
        align: 'right',
        verticalAlign: 'top',
        y: -60
    },        
    xAxis : {
      type : 'datetime',
      dateTimeLabelFormats : { // don't display the dummy year
        month : ' %b',
        year : '%b'
      }
    },
    yAxis : {
      title : {
        text : 'Views '
      },
      min : 0
    },
    tooltip : {
      formatter : function () {
        return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%e. %b', this.x) + ' | ' + this.y + ' Views';
      }
    },
    plotOptions : {
      area : {
        lineWidth : 1,
        marker : {
          enabled : false,
          states : {
            hover : {
              enabled : true,
              radius : 5
            }
          }
        },
        shadow : false,
        states : {
          hover : {
            lineWidth : 1
          }
        }
      }
    },

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    align: 'center',
                    verticalAlign: 'bottom',
                    layout: 'horizontal'
                },
                yAxis: {
                    labels: {
                        align: 'left',
                        x: 0,
                        y: -5
                    },
                    title: {
                        text: null
                    }
                },
                subtitle: {
                    text: null
                },
                credits: {
                    enabled: false
                }
            }
        }]
    },

    series : [{
        name : 'Student',
        legendColor: '4F43E4',
        type : "area",
        color: '#4F43E4',
        fillColor : {
          linearGradient : [0, 0, 0, 300],
          stops : [
            [0, Highcharts.getOptions().colors[0]],
            [1, 'rgba(79, 67, 228, 0)']
          ]
        },
        // Define the data points. All series have a dummy year
        // of 1970/71 in order to be compared on the same x axis. Note
        // that in JavaScript, months start at 0 for January, 1 for February 
        etc.
        data : [
          [Date.UTC(1970, 9, 27), 0],
          [Date.UTC(1970, 10, 10), 0.6],
          [Date.UTC(1970, 10, 18), 0.7],
          [Date.UTC(1970, 11, 2), 0.8],
          [Date.UTC(1970, 11, 9), 0.6],
          [Date.UTC(1970, 11, 16), 0.6],
          [Date.UTC(1970, 11, 28), 0.67],
          [Date.UTC(1971, 0, 1), 0.81],
          [Date.UTC(1971, 0, 8), 0.78],
          [Date.UTC(1971, 0, 12), 0.98],
          [Date.UTC(1971, 0, 27), 1.84],
          [Date.UTC(1971, 1, 10), 1.80],
          [Date.UTC(1971, 1, 18), 1.80],
          [Date.UTC(1971, 1, 24), 1.92],
          [Date.UTC(1971, 2, 4), 2.49],
          [Date.UTC(1971, 2, 11), 2.79],
          [Date.UTC(1971, 2, 15), 2.73],
          [Date.UTC(1971, 2, 25), 2.61],
          [Date.UTC(1971, 3, 2), 2.76],
          [Date.UTC(1971, 3, 6), 2.82],
          [Date.UTC(1971, 3, 13), 2.8],
          [Date.UTC(1971, 4, 3), 2.1],
          [Date.UTC(1971, 4, 26), 1.1],
          [Date.UTC(1971, 5, 9), 0.25],
          [Date.UTC(1971, 5, 12), 0]
        ]
      }, {
        name : 'Teacher',
        type : "area",
        color: '#2F80ED',
        fillColor : {
          linearGradient : [0, 0, 0, 300],
          stops : [
            [0, Highcharts.getOptions().colors[0]],
            [1, 'rgba(47, 128, 237, 0)']
          ]
        },
        data : [
          [Date.UTC(1970, 9, 18), 0],
          [Date.UTC(1970, 9, 26), 0.2],
          [Date.UTC(1970, 11, 1), 0.47],
          [Date.UTC(1970, 11, 11), 0.55],
          [Date.UTC(1970, 11, 25), 1.38],
          [Date.UTC(1971, 0, 8), 1.38],
          [Date.UTC(1971, 0, 15), 1.38],
          [Date.UTC(1971, 1, 1), 1.38],
          [Date.UTC(1971, 1, 8), 1.48],
          [Date.UTC(1971, 1, 21), 1.5],
          [Date.UTC(1971, 2, 12), 1.89],
          [Date.UTC(1971, 2, 25), 2.0],
          [Date.UTC(1971, 3, 4), 1.94],
          [Date.UTC(1971, 3, 9), 1.91],
          [Date.UTC(1971, 3, 13), 1.75],
          [Date.UTC(1971, 3, 19), 1.6],
          [Date.UTC(1971, 4, 25), 0.6],
          [Date.UTC(1971, 4, 31), 0.35],
          [Date.UTC(1971, 5, 7), 0]
        ]
      }
    ]
    });
    });
 $('.octo-report-slider').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:1,
            nav:true
        },
        1000:{
            items:3,
            nav:true,
            loop:false
        }
    }
   })
   });

如何在高图区域样条图中以这种格式显示结果  => {数据:[Date.UTC(2017,02,15),50}

我尝试了多种方法来实现该目的,请立即为考试目的提供帮助。

0 个答案:

没有答案