这两天在学习js 的图表生成.其中需要给js 传递这么一个数组.这是范例内的数组.所以现在的问题是有没有快捷的方式通过php来生成这个数组? 还是需要根据这个数组结构自己人肉的用php来各种组合?
series:[
{
type:"column",
name:"阿里巴巴",
data:[3, 2, 1, 3, 4]
},
{
type:"column",
name:"John",
data:[2, 3, 5, 7, 6]
},
{
type:"column",
name:"Joe",
data:[4, 3, 3, 9, 0]
},
{
type:"spline",
name:"Average",
data:[3, 2.67, 3, 6.33, 3.33],
er:{
lineWidth:2,
lineColor:Highcharts.getOptions().colors[3],
fillColor:"white"
}
},
{
type:"pie",
name:"Total consumption",
data:[
{
name:"Jane",
y:13,
color:"#4572A7" // Jane"s color
},
{
name:"John",
y:23,
color:"#AA4643" // John"s color
},
{
name:"Joe",
y:19,
color:"#89A54E" // Joe"s color
}
],
center:[100, 80],
size:100,
showInLegend:false,
dataLabels:{
enabled:false
}
}
]
series:[
{
type:"column",
name:"阿里巴巴",
data:[3, 2, 1, 3, 4]
},
{
type:"column",
name:"John",
data:[2, 3, 5, 7, 6]
},
{
type:"column",
name:"Joe",
data:[4, 3, 3, 9, 0]
},
{
type:"spline",
name:"Average",
data:[3, 2.67, 3, 6.33, 3.33],
er:{
lineWidth:2,
lineColor:Highcharts.getOptions().colors[3],
fillColor:"white"
}
},
{
type:"pie",
name:"Total consumption",
data:[
{
name:"Jane",
y:13,
color:"#4572A7" // Jane"s color
},
{
name:"John",
y:23,
color:"#AA4643" // John"s color
},
{
name:"Joe",
y:19,
color:"#89A54E" // Joe"s color
}
],
center:[100, 80],
size:100,
showInLegend:false,
dataLabels:{
enabled:false
}
}
]
1. 图表要用到的数据肯定是要前后交互的;
2. 图表展示用到的渲染选项, 比如showInLegend:false这样的数据得看你的业务, 如果你的图表有一些渲染项是后台配置的, 那也需要交互
3. 即便渲染项需要后台配置, 通常也不需要暴露全部渲染项给后台, 因此需要分析出要暴露给后台配置管理的渲染项
4. 搞清楚这些后, 再来制定前后台通讯的协议, 比如可以将数据分为数据和渲染项两部分, 前端拿到之后, 自己进行业务处理.你讲下是什么图表控件及具体业务, 可以具体给你看看
单独分割出来可能会对 js 代码组装产生困难似乎没有看到说明文档，可考虑从他提供的48个样例中抽取参数，从 Chart({ 开始，到 }); 结束，进行分析
然后写成若干个类工作量应该不算太大他是 js 代码级的 json 格式，而不是数据交换的 json 格式。你用 php 产生的 json 作为参数是不会有问题的
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
Array.prototype.sum = function() {
var sum = 0;
for ( var i = 0; i < this.length; i ++ )
sum += this[i];
return sum;
}
Array.prototype.avg = function() {
return this.sum() / this.length;
}
function column_series(s, d) {
for ( var i = 0; i < d.length; i ++ )
s.push({
type : 'column',
name : d[i].name,
data : d[i].value
});
}
function spline_average_series(s, d) {
var average = new Array();
for ( var i = 0; i < d.length; i ++ )
for ( var j = 0; j < d[i].value.length; j ++ )
average[j] = d[i].value[j] + (i == 0 ? 0 : average[j]);
for ( ; j -- > 0; )
average[j] = average[j] / i;
s.push({
type: 'spline',
name: 'Average',
data: average,
er: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
});
}
function pie_sum_series(s, d) {
var data = new Array();
for ( var i = 0; i < d.length; i ++ )
data.push({
name : d[i].name,
y : d[i].value.sum(),
color : d[i].color
});
s.push({
type : 'pie',
name : 'Total consumption',
data : data,
center : [100, 80],
size : 100,
showInLegend : false,
dataLabels : {
enabled : false
}
});
}
function combo_series(d) {
var series = new Array();
column_series(series, d);
spline_average_series(series, d);
pie_sum_series(series, d);
return series;
}
function render_combo(o) {
var chart = new Highcharts.Chart({
chart: {
renderTo: o.container
},
title: {
text: o.title
},
xAxis: {
categories: o.x_labels
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = ''+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: o.pie_title,
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: combo_series(o.data)
});
return chart;
}
function combo_get_data() {
return [{
name : 'Jane',
color : '#4572A7',
value : [3, 2, 1, 3, 4]
}, {
name : 'John',
color : '#AA4643',
value : [2, 3, 5, 7, 6]
}, {
name : 'Joe',
color : '#89A54E',
value : [4, 3, 3, 9, 0]
}];
}
$(function () {
var chart;
$(document).ready(function() {
chart = render_combo({
container : 'container',
title : 'Combination chart',
x_labels : ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'],
pie_title : 'Total fruit consumption',
data : combo_get_data()
});
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script><div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body>
</html>