Come scrivere le tue leggende personalizzate per google line chart/manipolazione della legenda del grafico a linee Google

Question

Sto utilizzando Google Visualization per creare grafici a linee per la mia applicazione. Ho seguito requisiti dal fatto che:

1. Manipolazione eventi sulle legende (come doubleClick, che ho risolto in qualche modo)
2. Avvolgendo le legende in due file evitando paginazione (più imp e richiesto)

Ho ricevuto le seguenti domande per ottenere una soluzione per le mie risposte: 1) Issue with legend pagination (Google Interactive chart API) Problema: eviterei di giocare con la dimensione del carattere perché il numero di legende può aumentare nel tempo

2) How the legends on Google charts can be wrapped Problema: non voglio che le legende siano in nessun altro posto che nella posizione: in basso. E la soluzione maxLines non funziona sulla posizione: fondo

3) Is there any way I can avoid pagination in legends of a google visualisation chart and show all the lines in two lines in a single page? Problema: questo è un altro collegamento, che menziona il mio problema, ma non sono state trovate risposte utili.

4) Google Documentazione: Intestazione: Grafico Leggenda testo e stile chdl, chdlp, chdls [Tutti i grafici] https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs Intestazione: Tabella impostazioni margines https://developers.google.com/chart/image/docs/chart_params#chart-margins-chma-all----charts Intestazione: Tooltip https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltips-an-introduction Commento: questi sono pochi documentazione google link in cui sono menzionate alcune leggende che manipolano le proprietà, ma ancora non risolvono il mio problema.

5) https://github.com/google/google-visualization-issues/issues/1286 Commento: Questo è il link dove posso vedere che, Google non ha fornito molte proprietà di manipolare le leggende, e non molto utili informazioni per risolvere il mio problema

6) Google charts legend manipulation Commento: Questo è l'unico link, in cui ho trovato un suggerimento su come risolvere il mio problema, cioè scrivere le proprie leggende. Ma non ci sono più collegamenti forniti per la documentazione, nessun link jsFiddle o no ref oltre a un link che non è utile per me.

Passando attraverso tutti questi, posso vedere solo la soluzione per risolvere il mio problema è scrivere le mie leggende personalizzate. Ma non ho idea di come scrivere un elemento completo aggiungendo all'API di google.

Per favore guidami a passare questo, eventuali suggerimenti/link/refs/suggerimenti sono i benvenuti.

Grazie.

Answer 1

Esempio: Costruire leggenda personalizzato, che si sincronizza con i dati e chart ...

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>