hicharts 时间曲线图_hi曲线是什么-优快云博客

本文通过使用HighCharts库绘制了一张反映每天用水量变化的时间序列曲线图，并详细配置了图表的各项参数，包括数据源、时间轴格式及交互功能。

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>用水量时间曲线图</title>
		<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
        <script type="text/javascript" src="exporting.js"></script>
		<script type="text/javascript">
        $(function () {
            var arrayData = [12.8446, 14.8445, 5.8444, 0,    24.8418, 40.8264,    32.8258, 12.8232,    24.8233, 22.8258,
                        16.8283, 18.8278, 6.8256, 7.8292,    21.8239, 33.8239,    39.8245, 50.8265,    21.8261, 11.8269];
            var data1 = [40,40,40,50,30,29,36,24,51,46,5,9,6,6] ;
            console.log( Date.UTC(2015, 0, 01));
            $('#container').highcharts({
                chart: {//图表类型
                    zoomType: 'x'
                },
                title: {//标题
                    text: '每天用水量分析'
                },
                subtitle: {//副标题
                    text: document.ontouchstart === undefined ?
                        '可点击拖动区域' :
                        'Pinch the chart to zoom in'
                },
                credits: {//是否显示logo
                  enabled:false
                },
                xAxis: {//x轴
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        day: '%m-%d'   
                    },
                    minRange: 14 * 24 * 3600000// fourteen days
                },
                yAxis: {//y轴
                    title: {
                        text: '用水量 (m³)'
                    }
                },
                legend: {//图例
                    enabled: false
                },
                plotOptions: {
                    area: {
                        fillColor: {
                            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                            stops: [
                                [0, Highcharts.getOptions().colors[0]],
                                [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                            ]
                        },
                        marker: {
                            radius: 2
                        },
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                },
                series: [{
                    type: 'area',
                    name: '用水量',
                    pointInterval: 24 * 3600 * 1000,
                    pointStart: Date.UTC(2015, 0, 01),
                    data: data1
                }],
                tooltip:{
                   formatter:function(){
                      return Highcharts.dateFormat('%Y-%m-%d',this.x)+'<br><strong>'+this.series.name+'</strong>'+' : '+this.y+' m³';
                   }
                }
            });
        });
		</script>
	</head>
	<body>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	</body>
</html>