highstock读取json创建area stack percentage

最新推荐文章于 2021-08-09 11:30:34 发布

chenghun3345

最新推荐文章于 2021-08-09 11:30:34 发布

阅读量131

点赞数

文章标签： json 人工智能

原文链接：https://my.oschina.net/sunnycx/blog/336629

版权

1, json文件：test_stackarea.json

[{
            "name": "Asia",
            "data": [[1412121600000,49271],
[1412208000000,46525],
[1412294400000,10855]]
        }, {
            "name": "Africa",
            "data": [[1412121600000,49271],
[1412208000000,46525],
[1412294400000,10855]]
        }, {
            "name": "Europe",
            "data": [[1412121600000,49271],
[1412208000000,0],
[1412294400000,10855]]
        }, {
            "name": "America",
            "data": [[1412121600000,49271],
[1412208000000,46525],
[1412294400000,10855]]
        }, {
            "name": "Oceania",
            "data": [[1412121600000,49271],
[1412208000000,46525],
[1412294400000,10855]]
        }]

2 js代码

function areastack() {
    	var seriesOptions = [],
        createChart = function () {
        $('#container').highcharts('StockChart', {

            rangeSelector : {
                selected : 1
            },
            xAxis: {
                tickmarkPlacement: 'on',
                title: {
                    enabled: false
                }
            },
            credits: {
                enabled: false
            },
            yAxis: {
                title: {
                    text: 'Percent(%)'
                }
            },
            title : {
                text : 'AAPL Stock Price'
            },
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} )<br/>',
                shared: true
            },

            series : seriesOptions, 
            plotOptions: {
                area: {
                    stacking: 'percent',
                    lineColor: '#ffffff',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#ffffff'
                    }
                }
            },
        });
    	};

	    $.getJSON('http://localhost/Metrics/json/test_stackarea.json',function (data) {
	    	for(var i=0;i<data.length;i++){
	    		 seriesOptions[i] = {
		            name: data[i].name,
		            data: data[i].data,
		            type : 'area',
		            threshold : null,
	    		 };
	    	}
	    	createChart();
	    });
};

3 效果图