javascript - Google 图表生成 1px 分隔符

Question

我正在使用谷歌折线图，我观察到一个问题。每当图表值稳定时，就会出现分隔符/1px 底部边框，但当值发生变化时，它不会出现。

我想去掉 border-bottom。

JS: http://kunal-b2b.000webhostapp.com/scripts/google-charts.js

工作代码:

  var data = google.visualization.arrayToDataTable([
    ['Element', 'Density', { role: 'style' }],
    ['', 2, 'red'],
    ['', 3, 'green'],
    ['', 2, 'red'],
    ['', 2, 'green'],
    ['', 2  , 'green']
  ]);

问题代码:

  var data = google.visualization.arrayToDataTable([
    ['Element', 'Density', { role: 'style' }],
    ['', 2, 'red'],
    ['', 2, 'green'],
    ['', 2, 'red'],
    ['', 2, 'green'],
    ['', 2  , 'green']
  ]);

引用网址: 网址:http://kunal-b2b.000webhostapp.com/test.html

Answer 1

添加以下选项...

baselineColor: 'transparent'

请参阅以下工作片段...

google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Element', 'Density', { role: 'style' }],
    ['', 2, 'red'],
    ['', 2, 'green'],
    ['', 2, 'red'],
    ['', 2, 'green'],
    ['', 2  , 'green']
  ]);

  var options = {
    title: "",
    bar: {groupWidth: '100%'},
    chartArea: { left: 0, width: "100%", top: 0 },
    legend: 'none',
    height: '50',
    hAxis: {
        title: ''
    },
    pointSize: 2,
    vAxis: {
        baselineColor: 'transparent',
        gridlines: {
            color: 'transparent'
        }
    },
    'backgroundColor': 'transparent',
  };

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

  // Wait for the chart to finish drawing before calling the getImageURI() method.
  google.visualization.events.addListener(chart, 'ready', function () {
    chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
    console.log(chart_div.innerHTML);
  });

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>