如果单击某个点,则在高位图中添加标记

时间:2014-02-05 05:52:07

标签: javascript highcharts

我希望在单击一个点时添加制造商,例如提醒选定点...选择点的代码:

cursor: 'pointer',
            events: {
                click: function(event) {
                    alert('x: ' + event.xAxis[0].value+' y: '+event.yAxis[0].value);
                }
            }},

现在我应该写什么代替警告来点击它时标记点?

3 个答案:

答案 0 :(得分:1)

而不是点击事件,您可以使用标记状态

plotOptions>系列>标记>国家>选择>半径:10

  plotOptions: {
    series: {
      allowPointSelect: true,
      marker: {
        radius: 1,
        states: {
          select: {
            radius: 10,
            fillColor: 'red'
          }
        }
      }
    }
  }

这是一个有效的example

API参考:http://api.highcharts.com/highcharts#plotOptions.line.marker.states.select

希望这能帮助您实现所需。

答案 1 :(得分:0)

我认为这种情况是正确的:

http://jsfiddle.net/rV7As/

plotOptions: {
        series: {
            allowPointSelect: true,
            point: {
                events: {
                    click: function (event) {
                        alert('aaa');
                    }
                }

            }
        }
    },

答案 2 :(得分:0)

感谢所有人的帮助......我得到了我想要的东西。我相应地创造了一个小提琴。

 $(function () {


            $('#container').highcharts({
                chart: {

                    type: 'line',
                    margin: [70, 50, 60, 80],

                    events: {
                        click: function(e) {
                            var ren = this.renderer;

                            // find the clicked values and the series
                            var x1 = e.xAxis[0].value;
                            x1 = this.xAxis[0].toPixels(x1);
                                y1 = e.yAxis[0].value;
                            y1 = this.yAxis[0].toPixels(y1);
                               series = this.series[0];

                    ren.circle(x1, y1, 5).attr({
                    'stroke-width': 2,
                    stroke: 'red',
                    fill: 'yellow',
                    zIndex: 3
                })
                .add();

                            // Add it
                           // series.addPoint([x, y]);

                        }
                    }
                },
                title: {
                    text: 'User supplied data'
                },
                subtitle: {
                    text: 'Click the plot area to add a point. Click a point to remove it.'
                },
                xAxis: {
                    minPadding: 0.2,
                    maxPadding: 0.2,
                    maxZoom: 60
                },
                yAxis: {
                    title: {
                        text: 'Value'
                    },
                    minPadding: 0.2,
                    maxPadding: 0.2,
                    maxZoom: 60,
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        lineWidth: 1,
                        point: {
                            events: {
                                'click': function() {
                                    if (this.series.data.length > 1) this.remove();
                                }
                            }
                        }
                    }
                },
                series: [{
                    data: [[20, 20], [80, 80]]
                }]
            });
        });

http://jsfiddle.net/das_palash89/WN3XC/3/