Question

我创建了一个Google图表。颜色代表一个工作日，例如红色：星期一，蓝色：星期二，等等。

如何创建图例以显示不同颜色的含义，例如红色：星期一，蓝色：星期二等？

非常感谢你吗？

update_history(df, client_id='C4', model_id='M4', category1='apple', category2='fruit')

Answer 1

在图表的"ready"事件上建立图例，
确保在绘制图表之前分配事件侦听器...

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

使用Google的日期格式获取星期几（星期一，星期二等）

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

如何在Google图表中创建用户定义的图例？

1 个答案: