dongzhan8620
2017-04-10 15:10
浏览 65

highcharts上的数据位置

I'm using codeigniter with highcharts, but when I fetch the data from database, it only appears like this:

result

What do you think is the problem?

controller

public function tabular()
    {
        $data['pizzas'] = $this->user_model->tabular();
        //var_dump($this->user_model->tabular());

        $this->load->view('template/header');
        $this->load->view('template/menubar');
        $this->load->view('template/highcharts',$data);
        $this->load->view('template/footer');

    }

model

public function tabular() {
        $this->db->select('products.name AS name, SUM(order_details.price) AS total');
        $this->db->from('order_details');
        $this->db->join('products', 'products.prod_id = order_details.prod_id', 'LEFT');
        $this->db->group_by("products.prod_id");
        $query = $this->db->get();
        foreach ($query->result() as $row){
            $results[] = array(
                'name' => $row->name,
                'total' => (float) $row->total
            );

        }
        return $results;
    }

view

Highcharts.chart('chart-C', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Browser market shares. January, 2015 to May, 2015'
        },
        subtitle: {
            text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: 'Total percent market share'
            }

        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: 'P{point.total:.2f}'
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>P{point.total:.2f}</b> of total<br/>'
        },

        series: [{
            name: 'Sales',
            colorByPoint: true,
            data: <?php echo json_encode($pizzas); ?>
        }],
    });

json_encode var_dump

string '[{"name":"pizza burger","total":870},{"name":"buffalo chicken","total":1085},{"name":"bacon mushroom","total":165},{"name":"sausage mania","total":450},{"name":"beef shawarma","total":1575},{"name":"yummy hotdog","total":230},{"name":"oreo pina","total":240},{"name":"tuna garlic","total":130},{"name":"all hungarian","total":135},{"name":"beef pepperoni","total":135},{"name":"hawaiian","total":480}]' (length=401)
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douzhimei8259 2017-04-10 18:38
    已采纳

    You can process your php data <?php echo json_encode($pizzas); ?> in js as

    var chartData=<?php echo json_encode($pizzas); ?>
    var category = [];
    var data = [];
    for (var i = 0; i < chartData.length; i++) {
      category.push(chartData[i].name);
      data.push(chartData[i].total);
    }
    

    Now category is array containing categories for xAxis of highcharts and data is array containing data for series

    these can be used in highcharts as

    xAxis: { categories: category, },

    and

    series: [{ name: "Order", data: data }],

    See the working code below

    var chartData = [{
      "name": "pizza burger",
      "total": 870
    }, {
      "name": "buffalo chicken",
      "total": 1085
    }, {
      "name": "bacon mushroom",
      "total": 165
    }, {
      "name": "sausage mania",
      "total": 450
    }, {
      "name": "beef shawarma",
      "total": 1575
    }, {
      "name": "yummy hotdog",
      "total": 230
    }, {
      "name": "oreo pina",
      "total": 240
    }, {
      "name": "tuna garlic",
      "total": 130
    }, {
      "name": "all hungarian",
      "total": 135
    }, {
      "name": "beef pepperoni",
      "total": 135
    }, {
      "name": "hawaiian",
      "total": 480
    }]
    var category = [];
    var data = [];
    for (var i = 0; i < chartData.length; i++) {
      category.push(chartData[i].name);
      data.push(chartData[i].total);
    }
    Highcharts.chart('container', {
      chart: {
        type: 'column'
      },
      title: {
        text: 'column chart'
      },
      xAxis: {
        categories: category,
      },
      yAxis: {
        min: 0,
        title: {
          text: 'Total fruit consumption'
        },
        stackLabels: {
          enabled: true,
          style: {
            fontWeight: 'bold',
            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
          }
        }
      },
      legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
      },
      tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}'
      },
      plotOptions: {
        column: {
          dataLabels: {
            enabled: true,
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
          }
        }
      },
      legend: false,
      series: [{
        name: "Quantity",
        data: data
      }],
    });
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </div>
    
    打赏 评论

相关推荐 更多相似问题