Google диаграммы генерируют 1px сепаратор

1

Я использую диаграмму google, и я наблюдаю за проблемой. Всякий раз, когда значения диаграммы стабильны, появляется нижняя граница seperator/1px, но когда появляется изменение значения, оно не появляется.

Я хотел избавиться от пограничного дна.

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']
  ]);

См. URL: URL: http://kunal-b2b.000webhostapp.com/test.html

Теги:
charts
rendering
google-visualization

1 ответ

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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню