Отобразить одну точку на линейной диаграмме материала Google

Если у меня есть одна строка данных, как это:

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

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'User');

  data.addRows([
    [new Date(), 41],
  ]);

  var options = {
    chart: {
      title: 'Active Users',
    },
    width: 900,
    height: 500
  };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));

  chart.draw(data, options);
}

Как отобразить точку в такой ситуации? Прямо сейчас, точка есть, но она не выделена. Эта проблема только в диаграмме материала, а не в классической.

1 ответ

Решение

Вариант для pointSize должен быть установлен для одной строки данных

однако, это один из нескольких вариантов, которые не работают на графиках материалов
см. эту проблему -> проблема с отслеживанием для паритета характеристик материала № 2143

Вместо этого рекомендуем использовать Базовую диаграмму, используя следующую опцию...

theme: 'material'

см. следующий рабочий фрагмент...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'User');

  data.addRows([
    [new Date(), 41],
  ]);

  var options = {
    height: 500,
    theme: 'material',
    title: 'Active Users',
    width: 900
  };

  if (data.getNumberOfRows() === 1) {
    options.pointSize = 5;
  }

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Другие вопросы по тегам