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

Question

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

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

非常感谢你？

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

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 个解决方案

解决方案1
0 2018-07-17 12:05:38

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

问题描述

1 个解决方案

解决方案1 0 2018-07-17 12:05:38

解决方案1
0 2018-07-17 12:05:38