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

Question

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

在这里,我试图在点上方显示点值.所以我正在使用注释.这里是如何删除谷歌api图表中的点(23和2008,145和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

您可以通过将stemColor参数设置为none 来删除注释刻度线或"词干" :

annotations: {
   stemColor : 'none'
}

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);
            }
        }
    }
    ...

但只有在没有其他rect元素为width1 的情况下才可以使用此解决方案。因此，您可以进行额外检查是否rectTags与原始数据数量相同。

请参阅jsBin 中的示例

此示例使用 SVG，不适用于 IE7/IE8。请参阅无法在 Internet Explorer 8 中显示 SVG 图表