Highcharts with all data for tooltip

PHP code

	header("Content-type: text/json");

	$items = array();
        while($row = mysql_fetch_object($rs)){
		$newDT = strtotime($row->dt) * 1000;
		$pass_rate = $row->pass_rate;
		$items[$row->tester][‘name‘]=$row->tester;
		$product = $row->product;
		$PSPT = $row->PSPT;
		$lot = $row->lot;
		$wafer = $row->wafer;
		$comment = $row->comment;			

		// The x value is the current JavaScript time, which is the Unix time multiplied by 1000.
		$x = strtotime($row->dt) * 1000;
		$y = floatval($row->pass_rate);
		$ret = array($x, $y);

		$arrDetails = array(‘PSPT‘ => $PSPT, ‘product‘ => $product, ‘lot‘ => $lot, ‘wafer‘ => $wafer, ‘comment‘ => $comment );
		$items[$row->tester][‘data‘][]=json_encode($ret);
		$items[$row->tester][‘details‘]["$x"]=json_encode($arrDetails);
	}
	print json_encode($items);

  Javascipt code:

var globalData = {}; //declare a json variable

$.getJSON(‘data_main.php‘, function(data) {
	$.each(data, function(key,value) {
		globalData[key] = value; //update to globalData for tooltip
	});
});	

formatter: function(){
	var json = eval("("+globalData[this.series.name]["details"][this.x]+")");
	var tt = "<b>Tester: </b>"+this.series.name + "<br />";
	tt = tt+ "<b>PSPT: </b>"+json.PSPT + "<br />";
	tt = tt+ "<b>Product: </b>"+json.product + "<br />";
	tt = tt+ "<b>Lot: </b>"+json.lot + "<br />";
	tt = tt+ "<b>Wafer: </b>"+json.wafer + "<br />";
	tt = tt+ "<b>comment: </b>"+json.comment + "<br />";
	return tt;
}

  Result:

时间: 2024-12-08 05:25:25

Highcharts with all data for tooltip的相关文章

highcharts图表组件通过设置tooltip属性自定义数据提示信息

$(function () { $('#container').highcharts({ chart: { }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, tooltip: { shared: true, //是否共享提示,也就是X一样的所有点都显示出来 useHTML: true, //是否使用HTML编辑提示信息 he

HighCharts基本使用实例(入门)

HighCharts 摘要 HighCharts是眼下最为流行的图表插件,应用范围广泛,眼下支持曲线图.区域图.3D图.柱状图.饼图.散列图.混合图等,而且还支持一些拓展的特殊图表,如:仪表图.极地图.箱线图.瀑布图等.因工作中用到,所以在这里我仅仅做最主要的配置使用. 官方站点:www.highcharts.com,有兴趣的同学也能够去上面学习很多其它的内容. 使用 首先须要到下载安装包 - highcharts下载 解压,然后导入两个js文件,然后写代码.举个官网上最简单的样例: <!doc

HighCharts使用心得

HighCharts使用心得 前言: 之前很早的一个项目中使用过highcharts,感觉挺方便的,图表类型也比较丰富,而且还支持数据的下钻,但是如果投入商业使用的话还会有一些版权的问题,所以后来就使用了EChart,这是百度开发的一个开源的图表插件,图表类型也很丰富,而且还有交互,对地图的支持也很好,可以免费的使用.在之前的一篇文章里,已经总结过了,今天主要跟大家分享一下,之前总结的Highcharts的一些使用心得,希望能够对大家有所帮助. 1.  准备工作------下载HighChart

HighCharts入门

一.什么是HighCharts 1.HighCharts是网页报表工具,开发语言是Javascript 2.HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 3.HighCharts支持图表的类型有:曲线图.柱状图.饼状图.区域图.散点图.综合图的各种图表需求. 直线图——line 折线图——spline 柱状图——column 饼状图——pie 区域图——area 综合图——more 一.你必须知道的 1.首先,HighCharts是基于Jquery框架开发的,所以需要在页

Highcharts 使用总结

一.Highcharts  series属性 1.下面是一个基本曲线图的例子: <html> <head> <meta charset="UTF-8" /> <title>Highcharts 曲线图</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <sc

Highcharts学习总结

一.Highcharts  series属性 1.下面是一个基本曲线图的例子: <html> <head> <meta charset="UTF-8" /> <title>Highcharts 曲线图</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <sc

highcharts实例和json数据显示

我是用mvc做的highcharts图表,其中遇到了一些问题,现在都解决了 这段代码是从后台Action里面返回的json字符串 #region 拼接字符串             StringBuilder humstr = new StringBuilder();             StringBuilder tempstr = new StringBuilder();             StringBuilder surfstr = new StringBuilder();  

Highcharts 基本曲线图;Highcharts 带有数据标签曲线图表;Highcharts 异步加载数据曲线图表

Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&quo

Highcharts 丢失值区域图;Highcharts 反转x轴与y轴;Highcharts 曲线区域图;Highcharts 区间区域图;Highcharts 使用区间和线的区域图

Highcharts 丢失值区域图 chart 配置 将 chart 的 spacingBottom 属性设置为 30.表示图表间的间隔区间. var chart = { type: 'area', spacingBottom: 30 }; 实例 文件名:highcharts_area_missing.htm <html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鸟教