如何为谷歌折线图/谷歌折线图图例操作编写自己的自定义图例 [英] How to write your own custom legends for google line chart/ Google line chart legend manipulation

查看：15
本文介绍了如何为谷歌折线图/谷歌折线图图例操作编写自己的自定义图例的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  1. 在图例上操作事件(例如 doubleClick，我有以某种方式解决了)
  2. 将图例包装成两行避免分页(大多数小鬼和必需)

我已经回答了以下问题以获得答案:1) 图例分页问题(Google Interactive chart API)问题:我会避免使用字体大小，因为图例的数量可能会随着时间的推移而增加

2)如何包装 Google 图表上的图例问题:我不希望图例出现在 position:bottom 以外的任何地方.并且 maxLines 解决方案不适用于位置:底部

3) 有什么办法可以避免在 google 可视化图表的图例中分页并在单个页面中以两行显示所有行吗?问题:这是另一个链接，它提到了我的问题，但没有找到有用的答案.

4) 谷歌文档:标题:图表图例文本和样式 chdl、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评论:这些是很少的谷歌文档链接，其中提到了很少的图例操作属性，但它们仍然没有解决我的问题.

5)https://github.com/google/google-visualization-问题/问题/1286评论:这是我可以看到的链接，谷歌没有提供很多操作图例的属性，也没有太多有用的信息来解决我的问题

6) 谷歌图表图例操作评论:这是唯一的链接，在那里我得到了有关如何解决我的问题的提示，即编写自己的图例.但是除了一个对我没有用的链接之外，没有为文档提供更多链接，没有 jsFiddle 或没有参考链接.

虽然经历了所有这些，但我认为解决我的问题的唯一方法是编写我自己的自定义图例.但我不知道如何编写一个完整的元素添加到 google API.

请指导我完成此操作，欢迎提供任何建议/链接/参考/提示.

谢谢.

解决方案

示例:构建自定义图例，与数据和图表同步... 

google.charts.load('44', {回调:drawChart，包:['控件'，'corechart']});函数 drawChart() {//改编自前面的例子var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21'];var data = new google.visualization.DataTable();data.addColumn('日期', '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([新日期(2016, 4, 1), 89, 476]);data.addRow([新日期(2016, 5, 1), 46, 444]);data.addRow([新日期(2016, 6, 1), 178, 442]);data.addRow([新日期(2016, 7, 1), 12, 274]);data.addRow([新日期(2016, 8, 1), 123, 934]);data.addRow([新日期(2016, 9, 1), 144, 145]);data.addRow([新日期(2016, 10, 1), 135, 946]);data.addRow([新日期(2016, 11, 1), 178, 747]);//出于示例目的，使用视图添加各种列var view = new google.visualization.DataView(data);view.setColumns([0, 1, 2,{计算:函数(数据，行){返回 data.getValue(row, 1) + data.getValue(row, 2);},类型:'数字'，标签:'Y3'},{计算:函数(数据，行){返回 data.getValue(row, 2) - data.getValue(row, 1);},类型:'数字'，标签:'Y4'},{计算:函数(数据，行){返回 data.getValue(row, 1) * 2;},类型:'数字'，标签:'Y5'},{计算:函数(数据，行){返回 data.getValue(row, 2) * 3;},类型:'数字'，标签:'Y6'},{计算:函数(数据，行){返回 data.getValue(row, 1) * 1.5;},类型:'数字'，标签:'Y7'},{计算:函数(数据，行){返回 data.getValue(row, 1) * 1.5;},类型:'数字'，标签:'Y8'}]);var control = new google.visualization.ControlWrapper({controlType: 'DateRangeFilter',容器 ID: 'control_div',选项: {过滤列索引:0}});var 图表 = 新的 google.visualization.ChartWrapper({图表类型:'线图'，容器 ID: 'chart_div',选项: {图表区域:{宽度:'80%'},//为图例映射添加颜色颜色:colorPallette，h轴:{格式:'MMM',slantedText:假，最大交替:1},传说:无"，宽度:320}});//添加图例标记函数 addLegendMarker(markerProps) {var legendMarker = document.getElementById('template-legend-marker').innerHTML;for(markerProps 中的 var 句柄){如果(markerProps.hasOwnProperty(句柄)){LegendMarker = legendMarker.replace('{{' + handle + '}}', markerProps[handle]);}}document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);}//图表就绪事件google.visualization.events.addListener(图表，'准备好'，函数(){var Legend = document.getElementById('legend_div');//图表中的颜色var colorPallette = chart.getOption('colors');//清除之前的图例Legend.innerHTML = '';//为每个 Y 轴列添加图例标记 - 跳过 X 轴 -->我 = 1for (var i = 1; i 

#legend_div {文本对齐:居中；宽度:320px；}.legend-marker {显示:内联块；填充:16px 4px 8px 4px；}.legend-marker-color {显示:内联块；高度:12px；宽度:12px；}

<script src="https://www.gstatic.com/charts/loader.js"></script><div id="仪表盘"><div id="chart_div"></div><div id="legend_div"></div><br/><div id="control_div"></div><br/><div id="message_div"></div>

<!-- 用于构建标记的模板--><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>

</script>

I am using Google Visualisation to create line charts for my application. I have following requirements in that :

  1. Manipulating events on legends (like doubleClick, which I have solved somehow)
  2. Wrapping the legends in two rows avoiding pagination (Most imp and required)

I have gone through the following questions to get solution for my answers: 1) Issue with legend pagination (Google Interactive chart API) Issue : I would avoid playing with font-size because the number of legends may increase over time

2)How the legends on Google charts can be wrapped Issue: I do not want legends to be anywhere else than at the position:bottom. And maxLines solution does not work on position : bottom

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? Issue: This is another link, which mentions my problem, but no useful answers found on it.

4) Google Documentation : Heading : Chart Legend Text and Style chdl, chdlp, chdls [All charts] https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs Heading : Setting Chart Margines https://developers.google.com/chart/image/docs/chart_params#chart-margins-chma-all----charts Heading : Tooltips https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltips-an-introduction Comment : These are few google documentation links where few legend manipulating properties are mentioned, but still they does not solve my problem.

5)https://github.com/google/google-visualization-issues/issues/1286 Comment : This is the link where I can see that, google has not provided many properties to manipulate legends, and no much useful information to solve my issue

6) Google charts legend manipulation Comment : This is the only link, where I got a hint about how to solve my issue i.e. writing own legends. But there is no more links provided for documentation, no jsFiddle or no ref links apart from one link which is not useful for me.

While gone through all these, I can see only solution to solve my problem is to write my own custom legends. But I have no idea about how to write a complete element adding to google API.

Please guide me to go through this, any suggestions/links/refs/hints are welcome.

Thank you.

解决方案

Example: Build custom legend, which syncs with data and chart... 

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>

这篇关于如何为谷歌折线图/谷歌折线图图例操作编写自己的自定义图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆