时间戳

首页 > 解决方案 > 如何在谷歌图表中创建用户定义的图例？

python - 如何在谷歌图表中创建用户定义的图例？

问题描述

我创建了一个谷歌图表。颜色代表工作日，例如红色：周一，蓝色：周二等。

如何创建图例以显示不同颜色的含义，即红色：Mon，蓝色：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>

标签： pythonchartsgoogle-visualization

解决方案

在图表的"ready"事件上构建图例，请
务必在绘制图表之前分配事件侦听器... 

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

使用谷歌的日期格式化程序来获取星期几（周一、周二等...） 

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>

注意：该timeZone选项用于上面的日期格式化程序，
这是由于数据表中使用的日期格式 ( YYYY-MM-DD)
如果使用以下格式，则可以删除此选项 --> ( MM/DD/YYYY)

运行以下代码段会显示每种格式导致的日期略有不同... 

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

推荐阅读