Googleライングラフ/ Googleラインチャートの凡例操作のための独自のカスタム凡例の作成方法

Question

私は自分のアプリケーションの折れ線グラフを作成するためにGoogle Visualizationを使用しています。私はその中の要件を次している：

1. が

は、ページネーションを回避二列に伝説をラッピング（ほとんどのIMPをし、必要な）（Iは は何とか解決してダブルクリック、のような）伝説上のイベントの操作します

私は答えを解決するために次の質問を行ってきました。 1）Issue with legend pagination (Google Interactive chart API) 問題：伝説の数が時間とともに増加する可能性があるので、私はフォントサイズで遊んでいません。

2）How the legends on Google charts can be wrapped 問題：私は、伝説が位置：底部以外にあることは望ましくありません。 maxLinesソリューションが位置で動作しません。

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? 問題：これは私の問題について言及していますが、役に立つ回答はありません。

4）グーグルドキュメント： 見出し：グラフの凡例のテキストとスタイルchdl、chdlp、chdls [すべてのグラフ] https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs 見出し：設定チャートMargines https://developers.google.com/chart/image/docs/chart_params#chart-margins-chma-all----charts 見出し：ツールチップ https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltips-an-introduction コメント：これらは、いくつかのGoogleドキュメント凡例が扱うプロパティはほとんどありませんが、それでも問題は解決しません。

5）https://github.com/google/google-visualization-issues/issues/1286 コメント：これは私が

6私の問題を解決するために、Googleは伝説を操作するための多くのプロパティを提供していない、と何の多くの有用な情報されていない、ことを見ることができるリンクです）Google charts legend manipulation コメント：この唯一のリンクです。そこで、自分の凡ての伝記を書いて自分の問題を解決する方法についてのヒントを得ました。しかし、ドキュメンテーションのためのリンクはもうありません。jsFiddleや、私にとって役に立たないリンクから離れたrefのリンクもありません。

これらのすべてを行っている間、私は自分のカスタムレジェンドを書くことが私の問題を解決するための解決策しか見ることができません。しかし、私はどのようにGoogle APIに追加する完全な要素を書くかについては考えていない。

私はこれを通過してください、任意の提案/リンク/参考文献/ヒントを歓迎してください。

ありがとうございます。

Answer 1

例：データとグラフと同期するカスタムの伝説を、ビルドの...あなたは、GoogleのAPIにカスタム凡例を追加しないでしょう

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>