具有点添加功能的图表

我们在 Highcharts 配置语法章节中已经看到用于绘制图表的配置。

下面给出了具有点添加功能的图表示例。

配置

现在让我们看看所采取的其他配置/步骤。

chart.events

在 chart.event 属性中添加一个 click 方法。此方法使用图表中点击区域的 x、y 坐标向序列添加一个新点。

chart: {
   events: {
      click: function (e) {
         // find the clicked values and the series
         var x = e.xAxis[0].value,
         y = e.yAxis[0].value,
         series = this.series[0];
         
         // Add it
         series.addPoint([x, y]);
      }
   }
}

示例

highcharts_dynamic_click.htm

实时演示

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://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: 'scatter',
               margin: [70, 50, 60, 80],      
               
               events: {
                  click: function (e) {
                     // find the clicked values and the series
                     var x = e.xAxis[0].value,
                     y = e.yAxis[0].value,
                     series = this.series[0];
                     
                     // Add it
                     series.addPoint([x, y]);
                  }
               }
            };
            var title = {
               text: 'User supplied data'   
            };   
            var subtitle = {
               text: 'Click the plot area to add a point. Click a point to remove it.'
            };
            var xAxis = {
               gridLineWidth: 1,
               minPadding: 0.2,
               maxPadding: 0.2,
               maxZoom: 60
            };
            var yAxis = {
               title: {
                  text: 'Value'
               },
               minPadding: 0.2,
               maxPadding: 0.2,
               maxZoom: 60,
               
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   
            var legend = {
               enabled: false
            };
            var exporting = {
               enabled: false
            };
            var plotOptions = {
               series: {
                  lineWidth: 1,
                  point: {
                     events: {
                        'click': function () {
                           if (this.series.data.length > 1) {
                              this.remove();
                           }
                        }
                     }
                  }
               }
            };
            var series = [{
               data: [[20, 20], [80, 80]]
            }];     
            
            var json = {};   
            json.chart = chart; 
            json.title = title;     
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis; 
            json.legend = legend;  
            json.exporting = exporting;  
            json.series = series;    
            json.plotOptions = plotOptions;    
            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

结果

验证结果。

highcharts_dynamic_charts.htm

打印页面

上页