如何对Highcharts区域图选中区域高亮显示

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何对Highcharts区域图选中区域高亮显示相关的知识，希望对你有一定的参考价值。

参考技术A 最近一直在研究SVG 恰好想起同事之前问过的一个问题 需求是给一个区域图部分高亮显示 高亮的区域由鼠标划过的坐标而定 其实也就是如何在一整块的SVG图形上显示不同的颜色 最后同事是用重新画图的方式解决的

在我看来 问题可能更为简单 Highcharts的区域图的<path>的d属性的值是有规律可循的 反映出这些点在屏幕上的坐标 所以我们只要找到我们想要区域的点 连接起来形成一个闭合图形 再给这一部分涂上颜色就可以了

最后显示出的效果如下图 具体实现过程可以在 此处 查看源码

Highcharts 丢失值区域图；Highcharts 反转x轴与y轴；Highcharts 曲线区域图；Highcharts 区间区域图；Highcharts 使用区间和线的区域图

chart 配置

将 chart 的 spacingBottom 属性设置为 30。表示图表间的间隔区间。

var chart = {
   type: \'area\',
   spacingBottom: 30
};

实例

文件名：highcharts_area_missing.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: \'area\',
      spacingBottom: 30
   };
   var title = {
      text: \'Fruit consumption *\'   
   }; 
   var subtitle = {
      text: \'* Jane\\\'s banana consumption is unknown\',
      floating: true,
      align: \'right\',
      verticalAlign: \'bottom\',
      y: 15
   };
   var legend = {
      layout: \'vertical\',
      align: \'left\',
      verticalAlign: \'top\',
      x: 150,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || \'#FFFFFF\'
   };
   var xAxis = {
      categories: [\'Apples\', \'Pears\', \'Oranges\', \'Bananas\', \'Grapes\', \'Plums\', \'Strawberries\', \'Raspberries\']      
   };
   var yAxis = {
      title: {
         text: \'Y-Axis\'
      },
      labels: {
         formatter: function () {
            return this.value;
         }
      }
   };
   var tooltip = {
      formatter: function () {
         return \'<b>\' + this.series.name + \'</b><br/>\' +
            this.x + \': \' + this.y;
      }
   };
   var plotOptions = {
      area: {
         fillOpacity: 0.5
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
        name: \'John\',
            data: [0, 1, 4, 4, 5, 2, 3, 7]
        }, {
            name: \'Jane\',
            data: [1, 0, 3, null, 3, 1, 2, 1]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.subtitle = subtitle; 
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $(\'#container\').highcharts(json);});</script></body></html>

以上实例输出结果为：

 

chart 配置

将 chart 的 inverted 属性设置为 true，X轴为垂直，Y轴为水平的。

var chart = {
   type: \'area\',
   inverted: true
};

实例

文件名：highcharts_area_inverted.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: \'area\',
     inverted: true
   };
   var title = {
      text: \'Average fruit consumption during one week\'   
   }; 
   var subtitle = {
      style: {
         position: \'absolute\',
         right: \'0px\',
         bottom: \'10px\'
      }
   };
   var legend = {
      layout: \'vertical\',
      align: \'left\',
      verticalAlign: \'top\',
      x: -150,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || \'#FFFFFF\'
   };
   var xAxis = {
      categories: [\'Monday\',\'Tuesday\',\'Wednesday\',\'Thursday\',\'Friday\',\'Saturday\',\'Sunday\']      
   };
   var yAxis = {
      title: {
         text: \'Number of units\'
      },
      labels: {
         formatter: function () {
            return this.value;
         }
      },
     min: 0
   };
   var plotOptions = {
      area: {
         fillOpacity: 0.5
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
        name: \'John\',
            data: [3, 4, 3, 5, 4, 10, 12]
        }, {
            name: \'Jane\',
            data: [1, 3, 4, 3, 3, 5, 4]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.subtitle = subtitle; 
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;   
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $(\'#container\').highcharts(json);
  
});
</script>
</body>
</html>

以上实例输出结果为：

 

Highcharts 曲线区域图

 

chart 配置

将 chart 的 type 属性设置为 areaspline，chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: \'areaspline\'  
};

实例

文件名：highcharts_area_spline.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: \'areaspline\'     
   };
   var title = {
      text: \'Average fruit consumption during one week\'   
   }; 
   var subtitle = {
      style: {
         position: \'absolute\',
         right: \'0px\',
         bottom: \'10px\'
      }
   };
   var legend = {
      layout: \'vertical\',
      align: \'left\',
      verticalAlign: \'top\',
      x: 150,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || \'#FFFFFF\'
   };
   var xAxis = {
      categories: [\'Monday\',\'Tuesday\',\'Wednesday\',\'Thursday\',\'Friday\',\'Saturday\',\'Sunday\']      
   };
   var yAxis = {
      title: {
         text: \'Fruit units\'
      }      
   };
   var tooltip = {
       shared: true,
       valueSuffix: \' units\'
   };
   var credits = {
       enabled: false
   }
   var plotOptions = {
      areaspline: {
         fillOpacity: 0.5
      }
   };   
   var series= [{
        name: \'John\',
            data: [3, 4, 3, 5, 4, 10, 12]
        }, {
            name: \'Jane\',
            data: [1, 3, 4, 3, 3, 5, 4]
      }
   ];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.subtitle = subtitle; 
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;   
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $(\'#container\').highcharts(json);
  
});
</script>
</body>
</html>

以上实例输出结果为：

 

Highcharts 区间区域图

 

chart 配置

将 chart 的 type 属性设置为 arearange，chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: \'arearange\'  
};

实例

文件名：highcharts_area_range.htm

<html>
<head>
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>  
   <script src="http://code.highcharts.com/highcharts-more.js"></script>   
   <script src="http://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
      type: \'arearange\',
      zoomType: \'x\'   
   };
   var title = {
      text: \'Temperature variation by day\'   
   };    
   var xAxis = {
      type: \'datetime\'     
   };
   var yAxis = {
      title: {
         text: null
      }      
   };
   var tooltip = {
       shared: true,
     crosshairs: true,
       valueSuffix: \'\\xB0C\'
   };
   var legend = {
       enabled: false
   }    
      
   var json = {};   
   json.chart = chart; 
   json.title = title;    
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;     
   
   $.getJSON(\'http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?\', function (data) {
      var series= [{
         name: \'Temperatures\',
         data: data
         }
      ];     
    json.series = series;
    $(\'#container\').highcharts(json);
   });    
});
</script>
</body>
</html>

以上实例输出结果为：

 

 

 

Highcharts 使用区间和线的区域图

chart 配置

将 chart 的 type 属性设置为 arearange，chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: \'arearange\'  
};

实例

文件名：highcharts_area_rangeline.htm

<html>
<head>
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>  
   <script src="http://code.highcharts.com/highcharts-more.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
    var ranges = [
      [1246406400000, 14.3, 27.7],
      [1246492800000, 14.5, 27.8],
      [1246579200000, 15.5, 29.6],
      [1246665600000, 16.7, 30.7],
      [1246752000000, 16.5, 25.0],
      [1246838400000, 17.8, 25.7],
      [1246924800000, 13.5, 24.8],
      [1247011200000, 10.5, 21.4],
      [1247097600000, 9.2, 23.8],
      [1247184000000, 11.6, 21.8],
      [1247270400000, 10.7, 23.7],
      [1247356800000, 11.0, 23.3],
      [1247443200000, 11.6, 23.7],
      [1247529600000, 11.8, 20.7],
      [1247616000000, 12.6, 22.4],
      [1247702400000, 13.6, 19.6],
      [1247788800000, 11.4, 22.6],
      [1247875200000, 13.2, 25.0],
      [1247961600000, 14.2, 21.6],
      [1248048000000, 13.1, 17.1],
      [1248134400000, 12.2, 15.5],
      [1248220800000, 12.0, 20.8],
      [1248307200000, 12.0, 17.1],
      [1248393600000, 12.7, 18.3],
      [1248480000000, 12.4, 19.4],
      [1248566400000, 12.6, 19.9],
      [1248652800000, 11.9, 20.2],
      [1248739200000, 11.0, 19.3],
      [1248825600000, 10.8, 17.8],
      [1248912000000, 11.8, 18.5],
      [1248998400000, 10.8, 16.1]
   ];
   var averages = [
      [1246406400000, 21.5],
      [1246492800000, 22.1],
      [1246579200000, 23],
      [1246665600000, 23.8],
      [1246752000000, 21.4],
      [1246838400000, 21.3],
      [以上是关于如何对Highcharts区域图选中区域高亮显示的主要内容，如果未能解决你的问题，请参考以下文章
 

 Highcharts 丢失值区域图；Highcharts 反转x轴与y轴；Highcharts 曲线区域图；Highcharts 区间区域图；Highcharts 使用区间和线的区域图


 highcharts柱状图的数据怎么显示到中间去了


 求助echarts 节点如何拖动


 Highchart-如何控制系列之间的间隔


 Highcharts区域填补顶部


 利用Highcharts生成柱状图如何给柱状图添加单击事件,比如点击柱状图的区域跳转到另外一个页面。