如何动态提供高图线图的xAxis

时间:2017-04-20 15:46:33

标签: javascript php

我想将mysql结果加载到highcharts'使用json的线图。在下面的代码中,xAxix是手动输入的。我如何从mysql数据库中动态提供它?你也会找到php代码和html代码。 感谢



$ g++ -std=c++0x -O0 -fno-implement-inlines -g t.cpp

$ ./a.out
Base Stack: 0x7ffff2826c8c
Sizeof(t): 2048
usePassByRef: stack: 0x7ffff282645c size on stack: 2096
usePassByValue: stack: 0x7ffff2825c1c size on stack: 2112
usePassPointer: stack: 0x7ffff2825bdc size on stack: 64




<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		
	</head>
	<body>
  

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>


  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>
		<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        $.getJSON("data.php", function(json) {
	    
		    chart = new Highcharts.Chart({
	            chart: {
	                renderTo: 'container',
	                type: 'line',
	                marginRight: 130,
	                marginBottom: 25
	            },
	            title: {
	                text: 'Revenue vs. Overhead',
	                x: -20 //center
	            },
	            subtitle: {
	                text: '',
	                x: -20
	            },
	            xAxis: {
	                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
	            },
	            yAxis: {
	                title: {
	                    text: 'Amount'
	                },
	                plotLines: [{
	                    value: 0,
	                    width: 1,
	                    color: '#808080'
	                }]
	            },
	            tooltip: {
	                formatter: function() {
	                        return '<b>'+ this.series.name +'</b><br/>'+
	                        this.x +': '+ this.y;
	                }
	            },
	            legend: {
	                layout: 'vertical',
	                align: 'right',
	                verticalAlign: 'top',
	                x: -10,
	                y: 100,
	                borderWidth: 0
	            },
	            series: json
	        });
	    });
    
    });
    
});
		</script>

	</body>
</html>

1 个答案:

答案 0 :(得分:0)

您只需{J}代码echo即可获得图表设置的xAxis属性:

subtitle: {
    text: '',
    x: -20
},
xAxis: <?php echo json_encode($result, JSON_NUMERIC_CHECK); ?>,
yAxis: ...

或者,如果您使用AJAX请求检索数据,请在初始化图表之前执行请求,并以相同的方式使用返回数据。