谷歌图表添加标记到线图功能 [英] Google Charts Add Markers to Linecharts Function

问题描述

  google.load（'visualization'，'1'，{ '包'：[ '应用于LineChart']}）; 
 google.setOnLoadCallback（drawChartYear）; 
 
函数drawChartYear（）{
 var data = google.visualization.arrayToDataTable（[
 ['Year'，'Cars'，'Bikes'，'Both']，
 ['2012'，1000，400，1400]，
 ['2013'，1170,460,1630]，
 ['2014'，660，1120，1780]，
 ['2015'，1030,540,1570] 
]）; 
 
 var chart = new google.visualization.LineChart（document.getElementById（'line_chart_year_div'））; 
 chart.draw（data，{width：800，height：240，legend：'bottom'，title：'View'}）; 
} 
  

我需要添加的代码是Markers。

我如何使用我的函数执行此操作？

解决方案

不提供显示标记，所以我的解决方案是在图表上添加svg点并在点上添加标记作为svg图像。

  google.setOnLoadCallback（ drawChart）; 
函数drawChart（）{
 var data = [
 ['Year'，'Cars'，'Bikes'，'Both']，
 ['2012'，1000， $ 1,400,400,1400]，
 ['2013'，1170,460,1630]，
 ['2014'，660,1120,1780]，
 ['2015'，1030,540， 1570] 
]; 
 var chart_data = google.visualization.arrayToDataTable（data）; 
 
 var options = {
 width：800，
 height：300，
 legend：'bottom'，
 title：'View'
}; 
 
 var chart = new google.visualization.LineChart（document.getElementById（'chart_div'））; 
 chart.draw（chart_data，options）; 
 //由line＃引导的逻辑名包含图表点的路径
 var path_collection = document.getElementsByTagName（'path'）; 
 var path_array = Array.prototype.slice.call（path_collection，0）; 
 var paths = path_array.filter（function（path）{
 return path.logicalname&& path.logicalname.indexOf（line＃）> -1; 
}） ; 
 
 paths.forEach（function（path，index1）{
 //转换坐标格式
 path.getAttribute（'d'）。split（'M'）。pop（ ）.split（'L'）。forEach（function（str_point，index2）{
 var image = document.createElementNS（http://www.w3.org/2000/svg，image）; 
 var point = str_point.split（，）; 
 image.setAttributeNS（null，x，point [0] -12）; 
 image.setAttributeNS（null，y ，点[1] -25）; 
 image.setAttributeNS（ht​​tp://www.w3.org/1999/xlink，href，https://cdn3.iconfinder.com/data /icons/location-map/512/pin_marker_star-512.png）; 
 image.setAttributeNS（null，height，25px）; 
 image.setAttributeNS（null，width， 25px）; 
 image.setAttributeNS（null，style，cursor：pointer）; 
 image.addEventListener（mousedown，function（e）{
 alert（data [0] [1 + index1] +：+ data [1 + index2] [1 + index1]）; 
 }）; 
 path.parentNode.appendChild（image）; 
}）; 
}）; 
} 
  

I am using this code to display google linecharts:

google.load('visualization', '1', {'packages':['linechart']});
      google.setOnLoadCallback(drawChartYear);

      function drawChartYear() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Cars', 'Bikes', 'Both'],
          ['2012',  1000,      400,      1400],
          ['2013',  1170,      460,      1630],
          ['2014',  660,       1120,     1780],
          ['2015',  1030,      540,      1570]
        ]);

        var chart = new google.visualization.LineChart(document.getElementById('line_chart_year_div'));
        chart.draw(data, {width: 800, height: 240, legend: 'bottom', title: 'View'});
      }

What I need to add to this code are Markers.

How do I do this using my function?

解决方案

As I know google chart doesn't supply to display markers, so my solution is to get svg points on the chart and add markers on the points as svg image.

jsfiddle

google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = [
        ['Year', 'Cars', 'Bikes', 'Both'],
        ['2012',  1000,      400,      1400],
        ['2013',  1170,      460,      1630],
        ['2014',  660,       1120,     1780],
        ['2015',  1030,      540,      1570]
    ];
    var chart_data = google.visualization.arrayToDataTable(data);

    var options = {
        width: 800, 
        height: 300, 
        legend: 'bottom', 
        title: 'View'
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(chart_data, options);
    // Paths whose logicalname lead by "line#" include chart points
    var path_collection = document.getElementsByTagName('path');
    var path_array = Array.prototype.slice.call( path_collection, 0 );
    var paths = path_array.filter(function(path){
        return path.logicalname && path.logicalname.indexOf("line#") > -1;
    });

    paths.forEach(function(path, index1){
        // convert coordinate format
        path.getAttribute('d').split('M').pop().split('L').forEach(function(str_point, index2){
            var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
            var point = str_point.split(",");
            image.setAttributeNS(null, "x", point[0]-12);
            image.setAttributeNS(null, "y", point[1]-25);
            image.setAttributeNS("http://www.w3.org/1999/xlink", "href", "https://cdn3.iconfinder.com/data/icons/location-map/512/pin_marker_star-512.png");
            image.setAttributeNS(null, "height", "25px"); 
            image.setAttributeNS(null, "width", "25px"); 
            image.setAttributeNS(null, "style","cursor:pointer");
            image.addEventListener("mousedown", function(e){
                alert(data[0][1+index1] +": "+ data[1+index2][1+index1]);
            });
            path.parentNode.appendChild(image);
        });
    });
}

这篇关于谷歌图表添加标记到线图功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！