hicharts 多条曲线图

最新推荐文章于 2018-04-25 12:07:00 发布
原创最新推荐文章于 2018-04-25 12:07:00 发布 · 1k 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#highcharts
本文展示了一个包含瞬时流量、温度及功率等关键参数随时间变化的曲线图。通过Highcharts绘制了不同月份的数据，旨在分析这些参数的变化趋势及其相互间的关系。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!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">
			$(function () {
			    $('#container').highcharts({
			        chart: {
			            zoomType: 'xy'
			        },
			        title: {
			            text: '图表分析'
			        },
			        subtitle: {
			            text: '不同曲线代表不同数据'
			        },
	                credits: {//是否显示logo
			          enabled:false
			        },
			        xAxis: [{
			            categories: ['一月', '二月', '三月', '四月', '五月', '六月',
			                '七月', '八月', '九月', '十月', '十一月', '十二月'],
			            labels: {
			                style: {
			                    color: '#333333',
			                    fontWeight: 'bold'
			                }
			            },
			        }],
			        yAxis: [{ // Primary yAxis
			            labels: {
			                formatter: function() {
			                    return this.value +'m³';
			                },
			                style: {
			                    color: '#4CB143',
			                    fontWeight: 'bold'
			                }
			            },
			            title: {
			                text: '瞬时流量',
			                style: {
			                    color: '#4CB143',
			                    fontWeight: 'bold'
			                }
			            },
			            lineWidth: 1
			        }, { // Secondary yAxis
			            gridLineWidth: 0,
			            title: {
			                text: '进水温度',
			                style: {
			                    color: '#4572A7',
			                    fontWeight: 'bold'
			                }
			            },
			            labels: {
			                formatter: function() {
			                    return this.value +' °C';
			                },
			                style: {
			                    color: '#4572A7',
			                    fontWeight: 'bold'
			                }
			            },
						opposite: true,
			            lineWidth: 1
			        }, { // Tertiary yAxis
			            gridLineWidth: 0,
			            title: {
			                text: '回水温度',
			                style: {
			                    color: '#AA4643',
			                    fontWeight: 'bold'
			                }
			            },
			            labels: {
			                formatter: function() {
			                    return this.value +' °C';
			                },
			                style: {
			                    color: '#AA4643',
			                    fontWeight: 'bold'
			                }
			            },
			            opposite: true,
			            lineWidth: 1
			        }, { // Tertiary yAxis
			            gridLineWidth: 0,
			            title: {
			                text: '功率',
			                style: {
			                    color: '#8085E9',
			                    fontWeight: 'bold'
			                }
			            },
			            labels: {
			                formatter: function() {
			                    return this.value +' W';
			                },
			                style: {
			                    color: '#8085E9',
			                    fontWeight: 'bold'
			                }
			            },
			            opposite: true,
			            lineWidth: 1
			        }, { // Tertiary yAxis
			            gridLineWidth: 0,
			            title: {
			                text: '室内温度',
			                style: {
			                    color: '#1B979C',
			                    fontWeight: 'bold'
			                }
			            },
			            labels: {
			                formatter: function() {
			                    return this.value +' °C';
			                },
			                style: {
			                    color: '#1B979C',
			                    fontWeight: 'bold'
			                }
			            },
			            opposite: true,
			            lineWidth: 1
			        }, { // Tertiary yAxis
			            gridLineWidth: 0,
			            title: {
			                text: '室内设定温度',
			                style: {
			                    color: '#B44F1F',
			                    fontWeight: 'bold'
			                }
			            },
			            labels: {
			                formatter: function() {
			                    return this.value +' °C';
			                },
			                style: {
			                    color: '#B44F1F',
			                    fontWeight: 'bold'
			                }
			            },
			            opposite: true,
			            lineWidth: 1
			        }],
			        tooltip: {
			            shared: true
			        },
			        legend: {
			            // layout: 'vertical',
			            // align: 'left',
			            // x: 100,
			            // verticalAlign: 'top',
			            // y: 20,
			            // floating: true,
			            // backgroundColor: '#FFFFFF'
			        },
			        series: [{
			            name: '瞬时流量',
			            color: '#4CB143',
			            type: 'spline',
			            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
			            tooltip: {
			                valueSuffix: ' m³'
			            }

			        }, {
			            name: '进水温度',
			            type: 'spline',
			            color: '#4572A7',
			            yAxis: 1,
			            data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
			            marker: {
			                enabled: false
			            },
			            dashStyle: 'shortdot',
			            tooltip: {
			                valueSuffix: ' °C'
			            }

			        }, {
			            name: '回水温度',
			            color: '#AA4643',
			            type: 'spline',
			            yAxis: 2,
			            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
			            tooltip: {
			                valueSuffix: ' °C'
			            }
			        }, {
			            name: '功率',
			            color: '#8085E9',
			            type: 'spline',
			            yAxis: 3,
			            data: [17.0, 26.9, 39.5, 24.5, 28.2, 31.5, 35.2, 16.5, 33.3, 28.3, 23.9, 19.6],
			            tooltip: {
			                valueSuffix: ' W'
			            }
			        }, {
			            name: '室内温度',
			            color: '#1B979C',
			            type: 'spline',
			            yAxis: 4,
			            data: [27.0, 36.9, 49.5, 34.5, 18.2, 11.5, 15.2, 36.5, 13.3, 8.3, 3.9, 39.6],
			            tooltip: {
			                valueSuffix: ' °C'
			            }
			        }, {
			            name: '室内设定温度',
			            color: '#B44F1F',
			            type: 'spline',
	                    yAxis: 5,
			            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 36.5, 13.3, 38.3, 43.9, 29.6],
			            tooltip: {
			                valueSuffix: ' °C'
			            }
			        }]
			    });
			});				
		</script>
	</head>
	<body>
        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
	</body>
</html>