代码之家 › 专栏 › 技术社区 › Carlo Barrogo

如何在谷歌图表上显示特定/特定的图例

google-visualization charts php

Carlo Barrogo · 技术社区 · 6 年前

我只想展示特定的传说,而不是全部。我只需要选择5个数据并只在图例部分显示。我用谷歌饼图

1 回复 | 直到 6 年前

WhiteHat 6 年前

在 series 选项,您可以使用属性 visibleInLegend (默认值= true )

为了隐藏第一个系列的传说…

series: {
  0: {
    visibleInLegend: false
  }
}

请参阅以下工作代码段…

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    [1, 5, 2, 6],
    [2, 6, 3, 7],
    [3, 7, 4, 8],
    [4, 8, 5, 9]
  ]);

  var options = {
    series: {
      0: {
        visibleInLegend: false
      }
    }
  };

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

对于饼图,只允许有一个系列。
要操作图例项,
我们必须使用 slices 选择,而不是 系列 .

请参阅以下工作代码段…

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    ['A', 5],
    ['B', 6],
    ['C', 7],
    ['D', 8]
  ]);

  var options = {
    slices: {
      0: {
        visibleInLegend: false
      }
    }
  };

  chart.draw(data, options);
});

<script src=“https://www.gstatic.com/charts/loader.js”></script>
<DIV id=“Chart_Div”></DIV>

推荐文章

Mnag · 下表中第95百分位的120%是多少?

1 年前

ttruhcheva · 如何在Power BI中创建灵活的数据标签?

2 年前

Î²Î³Î¹ Robert Longson · 广告牌js可选Y网格线-标签背景样式

7 年前

Ricardo Prida · Apache POI Powerpoint,XMLSlideShow。找不到createChart()

7 年前

Abhishek · 无法在NVD3中制作图表。x/y轴上的格式问题

7 年前

Paul Chris Jones · 在google中包含字符串列。可视化。数据组

7 年前

Joe Firebaugh · HighCharts项目符号图表似乎忽略了xAxis minTickInterval

7 年前

amea6995 · If/ElseIf语句仅适用于第一个If语句

7 年前

yash041 · google charts图形设置图例值和相同颜色列

7 年前

user8703261 · morris中的x轴问题。js公司

7 年前