Question

我在google api的折线图中得到了这张图表。

enter image description here

这里我试图在点上方显示点值。所以我正在使用注释。这里是如何删除谷歌api图表中的点（23＆amp; 2008,145＆amp; 2009 ...）之间的注释刻度标记。

<script type="text/javascript">
        google.load("visualization", "1", {packages: ["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year');                
            data.addColumn({type: 'number', role: 'annotation'}); 
            data.addColumn('number', 'Sales');

            data.addRows([
                ['2008', 23, 54],
                ['2009', 145, 55],
                ['2010', 245, 56],
                ['2011', 350, 57]
            ]);               
            var options = {
                width: 400,
                height: 200,
                pointSize: 4,
                legend: {position: 'none'},
                chartArea: {
                    left: 0,
                    top: 60,                        
                    width: 400,
                    height: 50},
                vAxis: {
                    baselineColor: '#fff',
                    gridlines: {color: 'transparent'},                        
                        maxValue:'58',
                        minValue:'52'                                  
                },                    
                tooltip: {trigger: 'none'},
                annotation: {
                    1: {
                        style: 'default'

                    }                                             
                }
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);

        }
    </script>

Answer 1

您可以删除注释刻度标记或＆＃39;词干＆＃39;将<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/list_view_item_border_selected" /> </selector>参数设置为none：

stemColor

Answer 2

似乎不可能使用API来做到这一点。

这4个刻度表示为SVG元素：

<g>
    <rect x="50.375" y="105" width="1" height="5" stroke="none" stroke-width="0" fill="#999999"></rect>
    <rect x="150.125" y="105" width="1" height="5" stroke="none" stroke-width="0" fill="#999999"></rect>
    <rect x="249.875" y="105" width="1" height="5" stroke="none" stroke-width="0" fill="#999999"></rect>
    <rect x="349.625" y="105" width="1" height="5" stroke="none" stroke-width="0" fill="#999999"></rect>
</g>

并没有什么特别可以挂钩来改变它。使用例如CSS规则display: none

您可以这样做：

var rectTags = document.getElementsByTagName("rect");

function drawChart() {
   ...

    chart.draw(data, options);

    for (var i = 0; i < rectTags.length; i++) {
        if (rectTags[i].hasAttribute("width")) {
            var width = rectTags[i].getAttribute("width");
            if (parseInt(width) == 1) {
                rectTags[i].setAttribute("width", 0);
            }
        }
    }
    ...

chart without ticks

但是，只有在没有其他rect元素且width 1的情况下才能使用此解决方案。因此，如果rectTags与数据数量相同，您可以执行其他检查原糖。

请参阅example at jsBin

此示例使用SVG，它不适用于IE7 / IE8。见Can't display SVG charts in Internet Explorer 8

如何删除谷歌api图表折线图中的注释刻度线？

2 个答案: