如何删除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 为 1 的情况下，您才可以使用此解决方案.因此，您可以额外检查 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屋！