[英]How to create user-defined legend in google chart?
I created an google chart. 我创建了一个谷歌图表。 Color represents a weekday, eg, red: Mon, blue: Tue, etc. 颜色表示工作日,例如红色:星期一,蓝色:星期二,等等。
How to create a legend to show the meaning of different colors, ie red: Mon, blue: Tue, etc.? 如何创建图例以显示不同颜色的含义,例如红色:星期一,蓝色:星期二等?
Thank you very much? 非常感谢你?
<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>
build the legend on the chart's "ready"
event, 在图表的"ready"
事件上建立图例,
be sure to assign the event listener before drawing the chart... 确保在绘制图表之前分配事件侦听器...
google.visualization.events.addListener(chart, "ready", buildLegend);
use google's date formatter to get the day of the week (Mon, Tue, etc...) 使用Google的日期格式器获取星期几(星期一,星期二等)
var formatDay = new google.visualization.DateFormat({
pattern: "EEE"
});
var weekday = formatDay.formatValue(rowDate);
add a legend marker for each row, until all the days are accounted for, 为每一行添加一个图例标记,直到计算完所有日期为止,
see following working snippet... 请参阅以下工作片段...
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 : the timeZone
option is used on the date formatter above, 注意 : timeZone
选项用于上面的日期格式化程序,
this is due to the format of the date used in the data table ( YYYY-MM-DD
) 这是由于数据表中使用的日期格式( YYYY-MM-DD
)
this option could be removed if the following format were used instead --> ( MM/DD/YYYY
) 如果改用以下格式,则可以删除此选项->( MM/DD/YYYY
)
running the following snippet reveals each format results in a slightly different date... 运行以下代码段显示每种格式的结果在日期上略有不同...
console.log(new Date("2018-01-01")); console.log(new Date("01/01/2018"));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.