代码之家 › 专栏 › 技术社区 › Chan

如何在google图表中创建自定义图例?

google-visualization charts python

Chan · 技术社区 · 6 年前

如何创建图例来显示不同颜色的含义,即红色:周一、蓝色:周二等。?

非常感谢你?

<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>

1 回复 | 直到 6 年前

WhiteHat 6 年前

"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"));