如何在Google api图表的折线图中删除注释刻度线? [英] How to remove annotation tick mark in line chart of google api chart?

问题描述

我在Google api的折线图中获得了此图表.

I got this chart in line chart of google api.

在这里，我试图在该点上方显示该点的值.所以我正在使用注释.在这里，如何删除Google API图表中的点(23& 2008、145& 2009 ...)之间的注释刻度线.

Here i'm trying to display the point value in above the point. so i'm using annotation. Here how to remove annotation tick mark in between the points(23 & 2008, 145 & 2009...) in google api chart.

<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>

推荐答案

似乎无法使用API​​做到这一点.

It seems it's not possible to do that using API.

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

Those 4 ticks are presented as SVG elements:

<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

and there is nothing special to hook on to change it. Using for example CSS rule 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元素和width的情况下，才可以使用此解决方案.因此，可以进一步检查rectTags是否与数据原始数目相同.

But you can use this solution only in case you have no other rect elements with width 1. So, you can do additional check if rectTags is the same as number of data raws.

请参见 jsBin的示例

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

This example uses SVG and it won't work with IE7/IE8. See Can't display SVG charts in Internet Explorer 8

这篇关于如何在Google api图表的折线图中删除注释刻度线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！