代码之家 › 专栏 › 技术社区 › Sushant

在google图表中以自定义HTML获取图例

google-visualization javascript

-2

Sushant · 技术社区 · 8 年前

我正在尝试用甜甜圈风格的谷歌图表获取传奇人物。我已经制作了自定义HTML区域来放置图例,但是,我无法从图表中获取它。

我已将整个代码放在GitHub上 https://github.com/Sushant-ABdigital/Admin-Panel

我已经检查了stakeoverflow问题,但无法获得帮助。链接: Google charts legend manipulation

我请求大家帮助我使用代码或参考资料,以获取指定区域中图例的详细信息。

非常感谢。某人

1 回复 | 直到 8 年前

WhiteHat 8 年前

要更正滑块的问题,
构建标记时需要使用饼图中的过滤数据表
(见下面的注释 //... )

要突出显示悬停时的切片,只需使用图表的 setSelection 方法

请参阅以下工作段。。。

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Donuts eaten');
  data.addRows([
    ['Jackson' , 5],
    ['Elisa', 7],
    ['Robert', 3],
    ['John', 2],
    ['Jessica', 6],
    ['Aaron', 1],
    ['Margareth', 8]
  ]);

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div')
  );

  var donutRangeSlider = new google.visualization.ControlWrapper({
    controlType: 'NumberRangeFilter',
    containerId: 'filter_div',
    options: {
      filterColumnLabel: 'Donuts eaten'
    }
  });

  var pieChart = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div',
    options: {
      width: 300,
      height: 300,
      pieSliceText: 'value',
      legend: 'none',
      colors: [
        "#ee99fd",
        "#949ed5",
        "#fd6e6e",
        "#e6ddda",
        "#fdcf57",
        "#51b8ae",
        "#bada55"
      ],
      pieHole: 0.4
    }
  });

  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);
  }

  google.visualization.events.addListener(pieChart, 'ready', function () {
    var legend = document.getElementById('legend_div');
    legend.innerHTML = '';
    // use filtered data table from piechart
    for (var i = 0; i < pieChart.getDataTable().getNumberOfRows(); i++) {
      var markerProps = {};
      markerProps.index = i;
      markerProps.color = pieChart.getOption('colors')[i];
      markerProps.label = pieChart.getDataTable().getValue(i, 0);
      addLegendMarker(markerProps);
    }

    // add legend hover
    var markers = legend.getElementsByTagName('DIV');
    Array.prototype.forEach.call(markers, function(marker) {
      marker.addEventListener('mouseover', function (e) {
        var marker = e.target || e.srcElement;
        if (marker.className !== 'legend-marker') {
          marker = marker.parentNode;
        }
        var rowIndex = parseInt(marker.getAttribute('data-rowIndex'));
        pieChart.getChart().setSelection([{row: rowIndex}]);
      }, false);
      marker.addEventListener('mouseout', function (e) {
        var marker = e.target || e.srcElement;
        if (marker.className !== 'legend-marker') {
          marker = marker.parentNode;
        }
        var rowIndex = parseInt(marker.getAttribute('data-rowIndex'));
        var selection = pieChart.getChart().getSelection();
        if (selection.length > 0) {
          if (selection[0].row === rowIndex) {
            pieChart.getChart().setSelection([]);
          }
        }
      }, false);
    });
  });

  dashboard.bind(donutRangeSlider, pieChart);
  dashboard.draw(data);
});

#legend_div {
  text-align: center;
  width: 500px;
}

.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">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
  <div id="legend_div"></div>
  <div id="message_div"></div>
</div>

<script id="template-legend-marker" type="text/html">
  <div class="legend-marker" data-rowIndex="{{index}}">
    <div class="legend-marker-color" style="background-color: {{color}}"></div>
    <span>{{label}}</span>
  </div>
</script>