Google çizgi grafiği/Google çizgi grafiği açıklaması için kendi özel efsaneleriniz nasıl yazılır?

Question

Uygulamam için çizgi grafikler oluşturmak için Google Görselleştirme özelliğini kullanıyorum. Bunun gereksinimleri vardır:

sayfalama kaçınarak iki sıra halinde efsaneleri tamamlayan (En imp ve gerekli) (ı nasılsa çözmüş DoubleClick gibi) efsanelere olayları kurgulama

Cevaplarıma çözüm bulmak için aşağıdaki soruları gözden geçirdim: 1) Issue with legend pagination (Google Interactive chart API) Sorun: Efsanelerin sayısı zamanla artabileceğinden yazı tipi boyutuyla oynamayı tercih ediyorum

2) How the legends on Google charts can be wrapped Sorun: Efsanelerin şu konumdan başka bir yerde olmasını istemiyorum: alt. Ve maxLines çözümü şu konumda çalışmıyor: alt

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? Sorun: Bu, benim sorunumdan bahseden başka bir bağlantıdır, ancak üzerinde yararlı bir yanıt bulunamadı.

4) Google Belgeler: Başlık: Grafik Legend Metin ve Stil chdl, chdlp, chdls [Tüm grafikler] https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs Başlık: Ayar Grafik Margines https://developers.google.com/chart/image/docs/chart_params#chart-margins-chma-all----charts Başlık: Araç ipuçları https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltips-an-introduction Yorum: Bunlar birkaç google dokümantasyon Birkaç lejandı manipüle edici özellikten bahsedildiği linkler, ama yine de problemimi çözmüyorlar.

5) https://github.com/google/google-visualization-issues/issues/1286 Yorum: Bu Bunu görebiliyorum link, google efsaneleri işlemek için birçok özellikler sunmamıştır ve hiçbir çok yararlı bilgiler Sorunum

6) Google charts legend manipulation Yorum çözmek için: Bu Sorunumun nasıl çözüleceğine, yani kendi efsanelerinin yazılmasına dair bir ipucu bulduğum tek bağlantı. Ancak, dokümantasyon için daha fazla bağlantı yok, jsFiddle yok veya benim için yararlı olmayan bir bağlantıdan başka bir bağlantı yok.

Tüm bunlardan geçerken, kendi problemimi çözmek için sadece kendi çözümümün kendi özel efsaneleri yazmak olduğunu görebiliyorum. Ancak, google API'ye ekleyerek tam bir öğenin nasıl yazılacağı hakkında hiçbir fikrim yok.

Lütfen bunu gözden geçirmeme yardımcı olun, öneri/linkler/referanslar/ipuçları kabul edilir.

Teşekkür ederiz.

Answer 1

Örnek: veri ve grafik ile eşitler özel efsaneyi, yak ... Google API için özel efsanesi eklemek olmaz

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>