javascript - haxis - horizontal bar chart google charts
Cómo escribir sus propias leyendas personalizadas para el gráfico de líneas de Google/manipulación de leyendas de gráficos de líneas de Google (2)
Ejemplo: crear una leyenda personalizada, que se sincroniza con datos y gráficos ...
google.charts.load(''44'', {
callback: drawChart,
packages: [''controls'', ''corechart'']
});
function drawChart() {
// adapted from a previous example
var colorPallette = [''#273746'',''#707B7C'',''#dc7633'',''#f1c40f'',''#1e8449'',''#2874a6'',''#6c3483'',''#922b21''];
var data = new google.visualization.DataTable();
data.addColumn(''date'', ''X'');
data.addColumn(''number'', ''Y1'');
data.addColumn(''number'', ''Y2'');
data.addRow([new Date(2016, 0, 1), 1, 123]);
data.addRow([new Date(2016, 1, 1), 6, 42]);
data.addRow([new Date(2016, 2, 1), 4, 49]);
data.addRow([new Date(2016, 3, 1), 23, 486]);
data.addRow([new Date(2016, 4, 1), 89, 476]);
data.addRow([new Date(2016, 5, 1), 46, 444]);
data.addRow([new Date(2016, 6, 1), 178, 442]);
data.addRow([new Date(2016, 7, 1), 12, 274]);
data.addRow([new Date(2016, 8, 1), 123, 934]);
data.addRow([new Date(2016, 9, 1), 144, 145]);
data.addRow([new Date(2016, 10, 1), 135, 946]);
data.addRow([new Date(2016, 11, 1), 178, 747]);
// use view to add various columns for example purposes
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2,
{
calc: function (data, row) {
return data.getValue(row, 1) + data.getValue(row, 2);
},
type: ''number'',
label: ''Y3''
},
{
calc: function (data, row) {
return data.getValue(row, 2) - data.getValue(row, 1);
},
type: ''number'',
label: ''Y4''
},
{
calc: function (data, row) {
return data.getValue(row, 1) * 2;
},
type: ''number'',
label: ''Y5''
},
{
calc: function (data, row) {
return data.getValue(row, 2) * 3;
},
type: ''number'',
label: ''Y6''
},
{
calc: function (data, row) {
return data.getValue(row, 1) * 1.5;
},
type: ''number'',
label: ''Y7''
},
{
calc: function (data, row) {
return data.getValue(row, 1) * 1.5;
},
type: ''number'',
label: ''Y8''
}
]);
var control = new google.visualization.ControlWrapper({
controlType: ''DateRangeFilter'',
containerId: ''control_div'',
options: {
filterColumnIndex: 0
}
});
var chart = new google.visualization.ChartWrapper({
chartType: ''LineChart'',
containerId: ''chart_div'',
options: {
chartArea: {
width: ''80%''
},
// add colors for legend mapping
colors: colorPallette,
hAxis: {
format: ''MMM'',
slantedText: false,
maxAlternation: 1
},
legend: ''none'',
width: 320
}
});
// add legend marker
function addLegendMarker(markerProps) {
var legendMarker = document.getElementById(''template-legend-marker'').innerHTML;
for (var handle in markerProps) {
if (markerProps.hasOwnProperty(handle)) {
legendMarker = legendMarker.replace(''{{'' + handle + ''}}'', markerProps[handle]);
}
}
document.getElementById(''legend_div'').insertAdjacentHTML(''beforeEnd'', legendMarker);
}
// chart ready event
google.visualization.events.addListener(chart, ''ready'', function () {
var legend = document.getElementById(''legend_div'');
// colors from chart
var colorPallette = chart.getOption(''colors'');
// clear previous legend
legend.innerHTML = '''';
// add legend marker for each Y axis column - skip X axis --> i = 1
for (var i = 1; i < chart.getDataTable().getNumberOfColumns(); i++) {
var markerProps = {};
markerProps.index = i;
markerProps.color = colorPallette[i - 1];
markerProps.label = chart.getDataTable().getColumnLabel(i);
addLegendMarker(markerProps);
}
// add click event to each legend marker
var markers = legend.getElementsByTagName(''DIV'');
Array.prototype.forEach.call(markers, function(marker) {
marker.addEventListener(''click'', function (e) {
var marker = e.target || e.srcElement;
if (marker.tagName.toUpperCase() !== ''DIV'') {
marker = marker.parentNode;
}
var columnIndex = parseInt(marker.getAttribute(''data-columnIndex''));
document.getElementById(''message_div'').innerHTML = ''legend marker clicked = '' + chart.getDataTable().getColumnLabel(columnIndex);
}, false);
});
});
var dash = new google.visualization.Dashboard(document.getElementById(''dashboard''));
dash.bind([control], [chart]);
dash.draw(view);
}
#legend_div {
text-align: center;
width: 320px;
}
.legend-marker {
display: inline-block;
padding: 16px 4px 8px 4px;
}
.legend-marker-color {
display: inline-block;
height: 12px;
width: 12px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart_div"></div>
<div id="legend_div"></div>
<br/>
<div id="control_div"></div>
<br/>
<div id="message_div"></div>
</div>
<!-- template for building marker -->
<script id="template-legend-marker" type="text/html">
<div class="legend-marker" data-columnIndex="{{index}}">
<div class="legend-marker-color" style="background-color: {{color}}"></div>
<span>{{label}}</span>
</div>
</script>
Estoy usando Google Visualization para crear gráficos de líneas para mi aplicación. Tengo los siguientes requisitos en eso:
- Manipulación de eventos en leyendas (como doubleClick, que he resuelto de alguna manera)
- Envolviendo las leyendas en dos filas evitando la paginación (la mayoría de imp y requerido)
Revisé las siguientes preguntas para obtener una solución para mis respuestas: 1) Problema con la paginación de leyenda (API de gráfico interactivo de Google) Problema: evitaría jugar con el tamaño de fuente porque la cantidad de leyendas puede aumentar con el tiempo
2) Cómo se pueden envolver las leyendas en los gráficos de Google Problema: No quiero que las leyendas estén en otro lugar que no sea en la posición: abajo. Y la solución maxLines no funciona en la posición: abajo
3) ¿Hay alguna forma de evitar la paginación en las leyendas de un gráfico de visualización de Google y mostrar todas las líneas en dos líneas en una sola página? Problema: este es otro enlace, que menciona mi problema, pero no se encontraron respuestas útiles.
4) Documentación de Google: Encabezado: Texto y estilo de la leyenda del gráfico chdl, chdlp, chdls [Todos los gráficos] https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs Encabezado: Gráfico de configuración Margines https://developers.google.com/chart/image/docs/chart_params#chart-margins-chma-all----charts Encabezado: Información sobre herramientas https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltips-an-introduction Comentario: Estos son algunos enlaces de documentación de Google donde se mencionan pocas propiedades de manipulación de leyendas, pero aún así no resuelven mi problema.
5) https://github.com/google/google-visualization-issues/issues/1286 Comentario: Este es el enlace donde puedo ver que Google no ha proporcionado muchas propiedades para manipular leyendas, y no hay mucha información útil para resolver mi problema
6) Manipulación de la leyenda de los gráficos de Google Comentario: este es el único enlace, donde obtuve una pista sobre cómo resolver mi problema, es decir, escribir sus propias leyendas. Pero no hay más enlaces proporcionados para la documentación, ni jsFiddle o no hay enlaces de referencia aparte de un enlace que no es útil para mí.
Si bien pasé por todo esto, puedo ver que la única solución para resolver mi problema es escribir mis propias leyendas personalizadas. Pero no tengo idea de cómo escribir un elemento completo que se agregue a la API de Google.
Por favor, guíenme para pasar por esto, cualquier sugerencia / enlace / referencia / sugerencia es bienvenida.
Gracias.
if ($("#source svg text[text-anchor=''end'']").length > 0){
var n = $("#source svg text[text-anchor=''end'']").length;
$("#source svg text[text-anchor=''end'']")[n-5].innerHTML = "";
$("#source svg text[text-anchor=''end'']")[n-4].innerHTML = "Create your own legend";
$("#source svg text[text-anchor=''end'']")[n-3].innerHTML = "Create your own legend";
$("#source svg text[text-anchor=''end'']")[n-2].innerHTML = "Create your own legend";
$("#source svg text[text-anchor=''end'']")[n-1].innerHTML = "";
}