【问题标题】:Google chart not showing Axis?谷歌图表没有显示轴?
【发布时间】:2017-02-05 12:01:03
【问题描述】:

今天早上我一直在搞乱 Google 地理图表,虽然我大部分时间都在工作,但它并没有在底部显示轴。它也不会在悬停时的工具提示中显示国家/地区。

我使用的代码是:

<script type="text/javascript">
    function mapMe() {
      google.charts.load('upcoming', {'packages':['geochart']});
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        arr = myParse();        
        var data = google.visualization.arrayToDataTable(arr);  

        var options = {colorAxis: {colors: ['#f5f5f5','#267114']}};
        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    }
</script>
<div class='container'>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
        <br><br><br><textarea rows="4" cols="50" id="testArea"></textarea>
        <button onclick='mapMe()'>
</div>

..数组调用的函数是:

function myParse() {
    var data = $('#testArea').val();
    var rows = data.split("\n");
    var result = [];
    var col = [];
    for (var r in rows) {
        row = rows[r].split("\t");
        result.push(row);
    }
    return result;
}

结果:

我输入的数据是从 Excel 复制并粘贴到文本区域中。它看起来像:

|Country|Number|
|Russia |1     |
..etc

我错过了什么傻事吗?就是解不开。非常感谢任何帮助!

【问题讨论】:

    标签: javascript google-visualization


    【解决方案1】:

    改变了我的方法并让它发挥作用,尽管不是我最初想要的方式:

        function mapMe() {
    
            google.charts.load('upcoming', {'packages':['geochart']});
            google.charts.setOnLoadCallback(drawRegionsMap);
    
            function drawRegionsMap() {
    
                var data_table = new google.visualization.DataTable();
    
                //NEED TO UPDATE THIS TO CHECK DATA TYPE OF FIRST ROW AND AUTO OUTPUT COLUMN HEADERS
                data_table.addColumn({"type": "string","label": "Country"});
                data_table.addColumn({"type": "number","label": "Volume"});
    
                var datas = $('#testArea').val();
                var rows = datas.split("\n");
    
                for (var r = 1; r < rows.length; r++) {
                    row = rows[r].split("\t");
                    data_table.addRow([{v: row[0]}, {v: parseInt(row[1])}]);
                }
    
                var options = {colorAxis: {colors: ['#f5f5f5','#267114']},  legend: {textStyle: {color: 'blue', fontSize: 16}}};
                var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
    
    
                chart.draw(data_table, options);
            }
        }
    

    我没有尝试传入一个数组,而是循环使用 addRow 命令。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-12-27
      • 1970-01-01
      • 1970-01-01
      • 2017-11-20
      • 1970-01-01
      相关资源
      最近更新 更多