Как создать пользовательскую легенду в Google Chart?

Question

Как создать пользовательскую легенду в Google Chart?

1

Я создал диаграмму Google. Цвет представляет собой будний день, например, красный: пн, синий: вт и т.д.

Как создать легенду, чтобы показать значение разных цветов, то есть красный: Mon, blue: Tue и т.д.?

Большое спасибо?

<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([
        ["Element", "Density", { role: "style" } ],
        ["2018-01-01", 142, "red"],
        ["2018-01-02", 469, "blue"],
        ["2018-01-03", 436, "green"],
        ["2018-01-04", 430, "yellow"],
        ["2018-01-05", 455, "orange"],
        ["2018-01-06", 252, "brown"],
        ["2018-01-07", 306, "black"],
        ["2018-01-08", 485, "red"],
        ["2018-01-09", 401, "blue"],
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
         //option information
        title: "Number of data",
        width: 3000,
        height: 6000,
        bar: {groupWidth: "80%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>
</html>

Chan 17 июль 2018, в 07:16

Источник

Теги:

python

charts

google-visualization

1 ответ

Ещё вопросы

WhiteHat · Answer 1 · 2018-07-17T10-59-00.000Z

построить легенду на графике "ready" событие,
не забудьте назначить прослушиватель событий перед рисованием диаграммы...

google.visualization.events.addListener(chart, "ready", buildLegend);

используйте формат даты Google для получения дня недели (Mon, Tue и т.д.).

var formatDay = new google.visualization.DateFormat({
  pattern: "EEE"
});
var weekday = formatDay.formatValue(rowDate);

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

google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Element", "Density", {type: "string", role: "style"}],
    ["2018-01-01", 142, "red"],
    ["2018-01-02", 469, "blue"],
    ["2018-01-03", 436, "green"],
    ["2018-01-04", 430, "yellow"],
    ["2018-01-05", 455, "orange"],
    ["2018-01-06", 252, "brown"],
    ["2018-01-07", 306, "black"],
    ["2018-01-08", 485, "red"],
    ["2018-01-09", 401, "blue"],
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: "stringify",
    sourceColumn: 1,
    type: "string",
    role: "annotation"
  }, 2]);

  var options = {
    //option information
    title: "Number of data",
    //width: 3000,
    //height: 6000,
    bar: {groupWidth: "80%"},
    legend: {position: "none"},
  };

  var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));

  // chart ready event
  google.visualization.events.addListener(chart, "ready", buildLegend);

  chart.draw(view, options);

  // build the legend
  function buildLegend() {
    // legend container
    var legend = document.getElementById("legend");
    legend.innerHTML = "";

    // date format - weekday
    var formatDay = new google.visualization.DateFormat({
      pattern: "EEE",
      timeZone: 5
    });

    // add legend marker for each weekday
    var weekdays = [];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      var rowDate = new Date(data.getValue(i, 0));
      var weekday = formatDay.formatValue(rowDate);
      if (weekdays.indexOf(weekday) === -1) {
        var markerProps = {};
        markerProps.color = data.getValue(i, 2);
        markerProps.label = weekday;
        addLegendMarker(markerProps);
        weekdays.push(weekday);
      }
      if (weekdays.length === 7) {
        break;
      }
    }
  }

  // add legend marker
  function addLegendMarker(markerProps) {
    var legendMarker = document.getElementById("template-legend").innerHTML;
    for (var handle in markerProps) {
      if (markerProps.hasOwnProperty(handle)) {
        legendMarker = legendMarker.replace("{{" + handle + "}}", markerProps[handle]);
      }
    }
    document.getElementById("legend").insertAdjacentHTML("beforeEnd", legendMarker);
  }
}

#legend {
  text-align: center;
}

.legend-marker {
  display: inline-block;
  padding: 4px;
}

.legend-marker-color {
  display: inline-block;
  height: 12px;
  width: 12px;
}

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

<div id="legend"></div>
<div id="barchart_values"></div>

<!-- template for building legend -->
<script id="template-legend" type="text/html">
  <div class="legend-marker">
    <div class="legend-marker-color" style="background-color: {{color}}"></div>
    <span>{{label}}</span>
  </div>
</script>

note: опция timeZone используется в форматировании даты выше,
это связано с форматом даты, используемой в таблице данных (YYYY-MM-DD)
эта опция может быть удалена, если вместо этого был использован следующий формат:> (MM/DD/YYYY)

запуск следующего фрагмента показывает, что каждый формат приводит к немного другой дате...

console.log(new Date("2018-01-01"));
console.log(new Date("01/01/2018"));

Вам нужна дополнительная помощь или воспользуйтесь галочкой рядом с кнопками голосования, чтобы пометить ответ как принятый?