SVG图表 - Highcharts和Highstock中文使用教程DEMO API - Json

最新推荐文章于 2022-11-24 17:51:05 发布

HookPHP

最新推荐文章于 2022-11-24 17:51:05 发布

阅读量111

点赞数

文章标签： json postman javascript 测试工具开发语言

本文链接：https://blog.csdn.net/weixin_44174401/article/details/125064346

版权

本文提供Highcharts和Highstock的中文使用教程，包括API演示和JSON数据的同步返回示例，特别是饼状图的Json数据应用。通过PHP代码展示了如何使用Json数据在Highstock中创建图表。

摘要由CSDN通过智能技术生成

在使用 Highcharts和Highstock 时候，相信大家有很多技术难点寻找不到解决方案，在此 http://my.oschina.net/cart/ 特意给大家分享成功经验：

Highstock API Demo - 针对Highcharts的区别是：此使用Json返回数据

<script type="text/javascript">
$(function() {
	Highcharts.setOptions({
        global:{
        	useUTC : false//避免因为时区引起的8小时误差，以服务端返回的时间戳微妙数为准
       }
    });
	
	var seriesOptions = [],
		yAxisOptions = [],
		seriesCounter = 0,
		names = ['AAA', 'BBB', 'CCC', 'DDD'],
		colors = Highcharts.getOptions().colors;

	$.each(names, function(i, name) {
                //这里巧妙的理由i循环来使用type的值，如0、1、2
		$.getJSON('http://my.oschina.net/cart/'+i, function(data) {
			seriesOptions[i] = {
				name: name,
                                data: data//Json数据如[['AAA':25],['BB',33],['CC',88]]
			};
			seriesCounter++;
			if (seriesCounter == names.length) {
				createChart();
			}
		});
	});

	function createChart() {
		$('#container').highcharts('StockChart', {
			chart: {