web-dev-qa-db-ja.com

Google折れ線グラフ/ Google折れ線グラフの凡例操作用に独自のカスタム凡例を作成する方法

Google Visualizationを使用して、アプリケーションの折れ線グラフを作成しています。その中には次の要件があります：

  1. 凡例のイベントを操作する（doubleClickなど、なんとかして解決しました）
  2. ページネーションを回避するために凡例を2行でラップする（ほとんどのインプと必須）

回答の解決策を得るために、次の質問に答えました。1） 凡例のページ付けに関する問題（Google Interactive chart API） 問題：凡例の数が増える可能性があるため、フォントサイズで遊ぶことは避けます。時間とともに

2） Googleグラフの凡例を折り返す方法 問題：凡例をposition：bottom以外の場所に配置したくない。そして、maxLinesソリューションは位置で機能しません：下

3） グーグル視覚化チャートの凡例のページ付けを回避し、すべての行を1ページに2行で表示する方法はありますか？ 問題：これは私の問題に言及している別のリンクですが、有用な答えは見つかりませんでした。

4）Googleドキュメント：見出し：グラフの凡例テキストとスタイルchld、chdlp、chdls [すべてのグラフ] https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs 見出し：グラフのマージンの設定 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チャートの凡例操作 コメント：これは、問題を解決する方法、つまり独自の凡例を作成する方法についてのヒントを得た唯一のリンクです。しかし、私にとって役に立たない1つのリンクを除いて、ドキュメント用に提供されているリンク、jsFiddle、またはrefリンクはありません。

これらすべてを実行している間、私の問題を解決するための唯一の解決策は、独自のカスタム凡例を作成することです。しかし、私はグーグルAPIに追加する完全な要素を書く方法についてはわかりません。

これを通過するように私を導いてください、どんな提案/リンク/参照/ヒントも大歓迎です。

ありがとうございました。

javascriptchartsgoogle-visualization
8
Priya Deshmukh

例：データおよびグラフと同期するカスタム凡例を作成します...

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>
10
WhiteHat