[问题]js数组和php数组的重口味关系

黄袍披身 2012-10-04 08:33:41
这两天在学习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],

                    marker:{

                        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

                    }

                }

            ]
...全文
212 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
黄袍披身 2012-10-04
  • 打赏
  • 举报
 回复
喲，居然把前端给封装上来了.好的，辛苦了，死了不少细胞吧？下午再来研究一下.多谢.

[Quote=引用 9 楼 的回复:]

下面是对你使用的该控件中的示例做的进一步封装, 仍然不够完善, 仅提供一个思路, 把问题的解决方案进行拆分

PHP code

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highch……
[/Quote]
goosman 2012-10-04
  • 打赏
  • 举报
 回复
下面是对你使用的该控件中的示例做的进一步封装, 仍然不够完善, 仅提供一个思路, 把问题的解决方案进行拆分



<!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, 

		marker: {

			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>
黄袍披身 2012-10-04
  • 打赏
  • 举报
 回复
嗯 我发帖后已经人肉拼装完成数据的输出 90%了 剩下一些手尾.

[Quote=引用 7 楼 的回复:]

所有的数据都包装在 chart = new Highcharts.Chart() 参数中
单独分割出来可能会对 js 代码组装产生困难

似乎没有看到说明文档，可考虑从他提供的48个样例中抽取参数，从 Chart({ 开始，到 }); 结束，进行分析
然后写成若干个类

工作量应该不算太大

他是 js 代码级的 json 格式，而不是数据交换的 json 格式。你用 php 产……
[/Quote]
xuzuning 2012-10-04
  • 打赏
  • 举报
 回复
所有的数据都包装在 chart = new Highcharts.Chart() 参数中
单独分割出来可能会对 js 代码组装产生困难

似乎没有看到说明文档，可考虑从他提供的48个样例中抽取参数，从 Chart({ 开始，到 }); 结束，进行分析
然后写成若干个类

工作量应该不算太大

他是 js 代码级的 json 格式，而不是数据交换的 json 格式。你用 php 产生的 json 作为参数是不会有问题的
黄袍披身 2012-10-04
  • 打赏
  • 举报
 回复
看起来像，我试过...他不是json...

[Quote=引用 3 楼 的回复:]

解码用json_decode
[/Quote]
黄袍披身 2012-10-04
  • 打赏
  • 举报
 回复
thx.

http://www.highcharts.com/

Highcharts

这个东西,原来想用php直接输出的，后来发现在客户端生成就可以了,这样省事很多(实际上发现没那么省事),
漂亮很多倒是真的...
你要有时间就瞧瞧...

上面是范例，一些参数的确是可以不传的，主要还是里面的series部分.


[Quote=引用 4 楼 的回复:]

newnew, 你这是哪个js库的?

我觉得首先要分析下前后端需要交互哪些数据.
1. 图表要用到的数据肯定是要前后交互的;
2. 图表展示用到的渲染选项, 比如showInLegend:false这样的数据得看你的业务, 如果你的图表有一些渲染项是后台配置的, 那也需要交互
3. 即便渲染项需要后台配置, 通常也不需要暴露全部渲染项给后台, 因此需要分析出要暴露给后台配置管理的渲染……
[/Quote]
goosman 2012-10-04
  • 打赏
  • 举报
 回复
newnew, 你这是哪个js库的?

我觉得首先要分析下前后端需要交互哪些数据.
1. 图表要用到的数据肯定是要前后交互的;
2. 图表展示用到的渲染选项, 比如showInLegend:false这样的数据得看你的业务, 如果你的图表有一些渲染项是后台配置的, 那也需要交互
3. 即便渲染项需要后台配置, 通常也不需要暴露全部渲染项给后台, 因此需要分析出要暴露给后台配置管理的渲染项
4. 搞清楚这些后, 再来制定前后台通讯的协议, 比如可以将数据分为数据和渲染项两部分, 前端拿到之后, 自己进行业务处理.

你讲下是什么图表控件及具体业务, 可以具体给你看看
Meteorlet 2012-10-04
  • 打赏
  • 举报
 回复
解码用json_decode
Meteorlet 2012-10-04
  • 打赏
  • 举报
 回复
这不是json的格式吗？用json_encode就可以
黄袍披身 2012-10-04
  • 打赏
  • 举报
 回复
好像有点弱智了，除了自己人肉组合之外似乎没有别的更好办法... ...
StAlan 2012-10-04
  • 打赏
  • 举报
 回复
Highcharts之前用过，也是人肉组合的，或者就自己封装一个吧
www_7di_net 2012-10-04
  • 打赏
  • 举报
 回复
高分問題果然關注度比較高
码无边 2012-10-04
  • 打赏
  • 举报
 回复
php完全可以做到的
javascript和php中的正则
正则: var subStr=str.replace(reg/str,'');   不改变原来的字符串返回替换后的字符窜; 如果不用正则,只能替换第一个匹配到的; var subStr=str.match(reg);   返回匹配到的字符串;如果不指定全局匹配,只match第一个出现的字符,一般和正则配合使用; var bool=reg.test(str)
java数组集合面试题，这10道大厂Java面试题，Java性能优化最佳实践
他们不知道如何在 Java 中序列化对象, 或者他们不熟悉任何 Java 示例来解释序列化, 忘记了诸如序列化在 Java 中如何工作, 什么是标记接口, 标记接口的目的是什么, 瞬态变量和可变变量之间的差异, 可序列化接口具有多少种方法, 在 Java 中,Serializable 和 Externalizable 有什么区别, 或者在引入注解之后, 为什么不用 @Serializable 注解或替换 Serializalbe 接口。你仍然可以使用其他流行的方法, 如你觉得更好, 欢迎讨论。
PHP面试题(一)
一：php部分 用PHP实现一个双向队列(使用deque) deque，全名double-ended queue，是一种具有队列和栈的性质的数据结构。双端队列中的元素可以从两端弹出，其限定插入和删除操作在表的两端进行。双向队列（双端队列）就像是一 个队列，但是你可以在任何一端添加或移除元素。而双端队列是一种数据结构，定义如下： A deque is a data structure cons...
JavaScript 的 MVC 模式
摘要: 本文介绍了模型-视图-控制器模式在 JavaScript 中的实现， 在 JavaScript 中，程序员可以根据自己的口味选择编程风格：面向过程或面向对象。 原文：Model-View-Controller (MVC) with JavaScript 作者：Alex@Net 译文：JavaScript 的 MVC 模式
「译」JavaScript 的 MVC 模式
原文连接：http://justjavac.com/javascript/2012/12/14/model-view-controller-mvc-javascript.html 我喜欢 JavaScript，因为它是在世界上最灵活的语言之一。 在 JavaScript 中，程序员可以根据自己的口味选择编程风格：面向过程或面向对象。 如果你是一个重口味，JavaScript 一样可以应付自如
基础编程

21,886

社区成员

140,364

社区内容

发帖
与我相关
我的任务
社区描述
从PHP安装配置，PHP入门，PHP基础到PHP应用
社区管理员
  • 基础编程社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章