Google Charts：如何隐藏折线图数据点处的垂直线

你看到的灰色垂直线是注释（annotation）的基线（stem），可以通过在图表配置的annotations选项中设置基线颜色为透明来隐藏它。

只需要在你的options里的annotations对象中添加stem: {color: 'transparent'}即可，修改后的配置片段如下：

var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' },
    pointSize:0,
    annotations: {
        alwaysOutside: false,
        textStyle: {
            fontSize: 12,
            color: '#000',
            auraColor: 'none'
        },
        stem: {
            color: 'transparent' // 隐藏注释基线
        }
    }
};

完整的修改后代码：

<!DOCTYPE html>
<html>
  <head>
    <title>My Line Chart</title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">      
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
            var data = google.visualization.arrayToDataTable([  
                ['Year', 'Sales', {role: 'annotation'}, 'Expenses', {role: 'annotation'}],
                ['2014',  1000, '',      400, ''],
                ['2015',  1170, '',      460, ''],
                ['2016',  660, '',       1120, ''],
                ['2017',  1030, '$1030', 540, '$540']
            ]);

            var options = {
                title: 'Company Performance',
                curveType: 'function',
                legend: { position: 'bottom' },
                pointSize:0,
                annotations: {
                    alwaysOutside: false,
                    textStyle: {
                        fontSize: 12,
                        color: '#000',
                        auraColor: 'none'
                    },
                    stem: {
                        color: 'transparent'
                    }
                }
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

            chart.draw(data, options);
}

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

你也可以选择设置stem.length: 0来达到同样的隐藏效果，两种方式任选其一即可。

内容的提问来源于stack exchange，提问作者Volatil3