《highcharts 标示区曲线图》由会员分享，可在线阅读，更多相关《highcharts 标示区曲线图（7页珍藏版）》请在金锄头文库上搜索。
1、Highcharts 标区曲线图Highcharts 标区曲线图Highcharts 曲线图以下实例演了标区曲线图。我们在前的章节已经了解了 Highcharts 配置语法。接下来让我们来看下如何配置。配置使 yAxis.plotBands 属性来配置标区。区间范围使 from 和 to 属性。颜设置 使 color 属性。标签样式使 label 属性。配置信息：var yAxis = title: text: Wind speed (m/s),min: 0,minorGridLineWidth: 0,gridLineWidth: 0,alternateGridColor: null,plot
2、Bands: / Light airfrom: 0.3,to: 1.5,color: rgba(68, 170, 213, 0.1),label: text: Light air,style: color: #606060, / Light breezefrom: 1.5,to: 3.3,color: rgba(0, 0, 0, 0),label: text: Light breeze,style: color: #606060, / Gentle breezefrom: 3.3,to: 5.5,color: rgba(68, 170, 213, 0.1),label: text: Gentl
3、e breeze,style: color: #606060 , / Moderate breezefrom: 5.5,to: 8,color: rgba(0, 0, 0, 0),label: text: Moderate breeze,style: color: #606060, / Fresh breezefrom: 8,to: 11,color: rgba(68, 170, 213, 0.1),label: text: Fresh breeze,style: color: #606060, / Strong breezefrom: 11,to: 14,color: rgba(0, 0,
4、0, 0),label: text: Strong breeze,style: color: #606060 , / High windfrom: 14,to: 15,color: rgba(68, 170, 213, 0.1),label: text: High wind,style: color: #606060 ;实例件名：highcharts_spline_bands.htmHighcharts 教程 | W3Cschool教程()$(document).ready(function() var chart = type: spline ; var title = text: Wind
5、 speed during two days ;var subtitle = text: October 6th and 7th 2009 at two locations in Vik i Sogn, Norway;var xAxis = type: datetime,labels: overflow: justify;var yAxis = title: text: Wind speed (m/s),min: 0,minorGridLineWidth: 0,gridLineWidth: 0,alternateGridColor: null,plotBands: / Light airfro
6、m: 0.3,to: 1.5,color: rgba(68, 170, 213, 0.1),label: text: Light air,style: color: #606060, / Light breezefrom: 1.5,to: 3.3,color: rgba(0, 0, 0, 0),label: text: Light breeze,style: color: #606060, / Gentle breezefrom: 3.3,to: 5.5,color: rgba(68, 170, 213, 0.1),label: text: Gentle breeze,style: color
7、: #606060 , / Moderate breezefrom: 5.5,to: 8,color: rgba(0, 0, 0, 0),label: text: Moderate breeze,style: color: #606060, / Fresh breezefrom: 8,to: 11,color: rgba(68, 170, 213, 0.1),label: text: Fresh breeze,style: color: #606060, / Strong breezefrom: 11,to: 14,color: rgba(0, 0, 0, 0),label: text: St
8、rong breeze,style: color: #606060 , / High windfrom: 14,to: 15,color: rgba(68, 170, 213, 0.1),label: text: High wind,style: color: #606060;var tooltip = valueSuffix: m/s;var plotOptions = spline: lineWidth: 4,states: hover: lineWidth: 5,marker: enabled: false,pointInterval: 3600000, / one hourpointS
9、tart: Date.UTC(2009, 9, 6, 0, 0, 0);var series= name: Vik i Sogn, data: 4.3, 5.1, 4.3, 5.2, 5.4, 4.7, 3.5, 4.1, 5.6, 7.4, 6.9, 7.1,7.9, 7.9, 7.5, 6.7, 7.7, 7.7, 7.4, 7.0, 7.1, 5.8, 5.9, 7.4,8.2, 8.5, 9.4, 8.1, 10.9, 10.4, 10.9, 12.4, 12.1, 9.5, 7.5,7.1, 7.5, 8.1, 6.8, 3.4, 2.1, 1.9, 2.8, 2.9, 1.3, 4
10、.4, 4.2,3.0, 3.0, name: Norway,data: 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4; var navigation = menu
11、ItemStyle: fontSize: 10px var json = ;json.chart = chart;json.title = title;json.subtitle = subtitle;json.tooltip = tooltip;json.xAxis = xAxis;json.yAxis = yAxis; json.series = series;json.plotOptions = plotOptions;json.navigation = navigation;$(#container).highcharts(json););尝试下 以上实例输出结果为：Highcharts 曲线图W3Cschool（）最的技术知识分享与学习平台此篇内容来于站户上传并发布。
