Question

我正在使用Highchart来显示自行车道的距离和高度，我在Gmap上存储和查看折线。在图表中，x轴是距离，y轴是高程。带有可点击点的图表类似于此演示图表（http://www.highcharts.com/demo/line-ajax）。

第一部分：将鼠标移到图表上并查看轨道上的位置（gmap折线点）。现在我想点击轨道并查看图表上的点（高程，距离）。获取数据（海拔，距离）没问题，但是：

如何将图表中的光标/指针（理想情况下是小垂直线）移动到相应的点？

Answer 1

我使用highcharts完成了高程图。在所提出的方法中，“r”是从谷歌提升API获得的响应，并且是从高程值获得的最小和最大高度的最小值和最大值。将图表呈现给用户后，如果他在图表中单击，它将在地图上的相应点上显示标记。

    var drawGraph = function (r, min,max) {
    var ec = $("#elevation-chart").empty();

    var counter=0;
    var arrayDistance_Elevation_Chart=[];//multidimensional array with accumulated distance corresponding to each elevation
    var arrayDistance_Position_Chart={};//object  with accumulated distance corresponding to each position

    var totalDistance=0;

        for (var i = 0; i < r.length; i++) {


           if(counter>0)
           {

           var latLngStart =r[i-1].location;
           var latLngEnd = r[i].location;
           //document.getElementById("distanceinfo").innerHTML=latLngStart;

           totalDistance+=getDistance(latLngStart,latLngEnd);

            totalDistance=round(totalDistance,3);
           arrayDistance_Elevation_Chart.push([totalDistance,round(r[i].elevation,3)]);
           arrayDistance_Position_Chart[totalDistance.toString()]=r[i].location;
           }
            counter++;
        }

         var chart = {
               zoomType: 'xy'
            };
            var subtitle = {
               text: ''   
            };
            var title = {
               text: 'Elevation'   
            };
            var xAxis = {

              title: {
                     text: 'Distance'
                 }
            };
            var yAxis = [
               { //  yAxis - Elevation
                    min: min,
                    max: max,      
                    title: {
                     text: 'Elevation',


                     style: {
                        color: Highcharts.getOptions().colors[8]
                     }
                  },
                  labels: {
                     format: '{value}',
                     style: {
                        color: Highcharts.getOptions().colors[8]
                     }
                  }
              }
            ];
            var tooltip = {
               shared: true
            };
            var legend = {
             align:'left',
             alignColumns:false,
             verticalAlign:true,

               floating: true,

               backgroundColor: (
                  Highcharts.theme && Highcharts.theme.legendBackgroundColor)
                  || '#FFFFFF'
            };
            var series = [
               {
                  name: 'Elevation',
                  yAxis: 0,
                  tickinterval: 1,
                    marker: {
                    enabled: true,
                    radius: 3
                 },
                   color: Highcharts.getOptions().colors[8],
                  shadow: true,
                 tooltip: {
                     xDateFormat:  "%H:%M:%S"
                },  
                  data: arrayDistance_Elevation_Chart,

            }           

            ];   
           var  plotOptions={
            series: {
            point: {
                events: {
                mouseOver: function() {

                    hoverMarker.setVisible(true);
                    hoverMarker.setPosition(arrayDistance_Position_Chart[this.x.toString()]);
                },
                click: function() {


                    map.panTo(arrayDistance_Position_Chart[this.x.toString()]);
                }
               }

              }
             }};

            var json = {};   
            json.chart = chart;   
            json.title = title;
            json.subtitle = subtitle;      
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;  
            json.legend = legend;  
            json.plotOptions=plotOptions;
            json.series = series;


            $('#elevationChart').highcharts(json);  

};

单击gmap折线点设置Highchart光标/指针

1 个答案: