javascript - 数据在 Highcharts 上的位置

Question

我正在使用带有 highcharts 的 codeigniter，但是当我从数据库中获取数据时，它只显示如下:

您认为问题出在哪里？

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

    }

型号

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;
    }

查看

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)

Answer 1

您可以处理您的 php 数据 <?php echo json_encode($pizzas); ?>在js中为

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

现在category是包含 highcharts 和 data 的 xAxis 类别的数组是包含系列数据的数组

这些可以在 Highcharts 中用作

xAxis: {
categories: category,
},

和

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

请参阅下面的工作代码

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>