Highcharts 通过点击添加数据的动态图 - 学习 Hightcharts

下图是一个 Highcharts 通过点击添加数据的动态图

配置

配置事件属性 chart.event 中添加 click 方法（整个图表的绘图区上所发生的点击事件）

该方法在图表绘图区上发生点击时会添加新的数据点

chart: {
   events: {
      click: function (e) {
         // 获取点击坐标和数据项
         var x = e.xAxis[0].value,
         y = e.yAxis[0].value,
         series = this.series[0];
         // 添加点击的坐标
         series.addPoint([x, y]);
      }
   }
}

范例

下面的代码列出了 Highcharts 通过点击添加数据的动态图 的基本配置

<!doctype html>
<meta charset="utf-8" />
<title>Highcharts 基础教程 | 简单教程(www.twle.cn)</title>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
<script> 
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 options = {};   
options.chart = chart; 
options.title = title;     
options.subtitle = subtitle;
options.xAxis = xAxis;
options.yAxis = yAxis; 
options.legend = legend;  
options.exporting = exporting;  
options.series = series;    
options.plotOptions = plotOptions;    

Highcharts.chart('container',options);
</script>

运行范例 »

以上范例输出如下