如何为Google折线图/ Google折线图图例操作编写自己的自定义图例

Question

我正在使用Google Visualization为我的应用程序创建折线图。我有以下要求：

1. 处理图例事件（例如doubleClick，我已通过某种方式解决了该事件）
2. 将图例两行包装以避免分页（大多数imp和必填项）

Answer 1

示例：构建自定义图例，该图例与数据和图表同步…

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>