изменить шрифт и вес определенной метки в Google Visualization Charts - PullRequest
Новая
       0

изменить шрифт и вес определенной метки в Google Visualization Charts

1 голос
/ 07 ноября 2019

У меня есть диаграмма Google. Например (из документации Google): 

  <html>
  <head>
    <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', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

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

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

Я хочу изменить шрифт и вес одной из легенд, скажем, Sales. Я не могу понять, как это сделать. Есть ли простой способ?

1 Ответ

1 голос
/ 07 ноября 2019

нет настроек из коробки, чтобы изменить конкретную метку.

для каждого типа метки, есть опция textStyle.
, но опять же, это изменит все метки этого типа.
например, чтобы изменить все метки легенды, используйте-> legend.textStyle 

legend: {
  textStyle: {
    bold: true,
    color: 'cyan',
    fontSize: 18
  }
}

однако мы можем вручную внести изменения в график, как только он закончит рисовать,
во время события 'ready'.

см. Следующий рабочий фрагмент, здесь мы находим метки, используемые на диаграмме,
сравниваем их с заголовками столбцов в таблице данных,
, если найден, мы меняем стиль в зависимости отиндекс столбца ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: {
      position: 'bottom',
      textStyle: {
        bold: true,
        color: 'cyan',
        fontSize: 18
      }
    }
  };

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

  // listen for ready event, must be assigned before calling draw
  google.visualization.events.addListener(chart, 'ready', function () {
    // get text elements from chart
    var labels = chart.getContainer().getElementsByTagName('text');

    // loop chart labels
    Array.prototype.forEach.call(labels, function(label) {
      // loop data table columns
      for (var i = 1; i < data.getNumberOfColumns(); i++) {
        // determine if label matches legend entry
        if (label.textContent === data.getColumnLabel(i)) {
          // determine column index
          switch (i) {
            // first series
            case 1:
              label.setAttribute('fill', 'magenta');
              label.setAttribute('font-size', '24');
              label.setAttribute('font-weight', 'normal');
              break;

            // second series
            case 2:
              label.setAttribute('fill', 'lime');
              label.setAttribute('font-size', '12');
              break;
          }
        }
      }
    });
  });

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>
...