Google图表-带滑块的显示列的总和
Google图表是一款强大的数据可视化工具，可以帮助用户通过图表和图形直观地展示和分析数据。其中带滑块的显示列的总和是一种特殊的图表类型，它可以在图表中显示列的总和，并通过滑块控制显示的列数。
这种图表类型通常适用于以下场景：
- 数据集包含大量列，但用户只关注其中几列的总和。
- 用户希望通过滑块自定义显示的列数，以便更好地观察数据的变化趋势。
Google图表提供了多种实现带滑块的显示列的总和的方法，其中一种常见的方法是使用Google Charts库中的ColumnChart和ControlWrapper组件。
在使用Google图表库创建带滑块的显示列的总和图表时，可以按照以下步骤进行操作：
- 引入Google Charts库的JavaScript文件。
- 创建一个HTML元素作为图表的容器。
- 创建一个数据表，并添加列和数据。
- 创建一个ColumnChart实例，并将其绑定到图表容器。
- 创建一个ControlWrapper实例，并将其绑定到ColumnChart实例。
- 添加一个滑块控件到ControlWrapper实例，并配置滑块的参数。
- 绘制图表。
以下是一个示例代码，展示了如何使用Google图表库创建带滑块的显示列的总和图表：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Value');
data.addRows([
['Category 1', 100],
['Category 2', 200],
['Category 3', 300],
['Category 4', 400],
['Category 5', 500]
]);
var columnChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div'
});
var controlWrapper = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'control_div',
options: {
filterColumnLabel: 'Value'
}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
dashboard.bind([controlWrapper], [columnChart]);
dashboard.draw(data);
}
</script>
</head>
<body>
<div id="dashboard_div">
<div id="chart_div"></div>
<div id="control_div"></div>
</div>
</body>
</html>在这个示例中，我们创建了一个包含5个类别和对应值的数据表。然后，我们创建了一个ColumnChart实例和一个ControlWrapper实例，并将它们绑定在一个Dashboard中。最后，我们将数据表、ColumnChart实例和ControlWrapper实例传递给Dashboard，并调用draw方法绘制图表。
对于这个示例，我们可以使用腾讯云的数据分析产品TencentDB、云原生产品TKE等来支持数据存储和计算的需求。具体产品介绍和链接地址可以根据实际情况选择合适的腾讯云产品。
相关·内容
1回答
Google图表-带滑块的显示列的总和
javascript、charts、google-visualization
我已经生成了一个带有日期滑块的仪表板，它可以更改图形所显示的内容。我找不到一种方法来计算所显示的列的总数。
'packages': ['corechart', 'controls']google.charts.setOnLoadCallback(drawCh
浏览 19提问于2017-01-21得票数 3
回答已采纳
1回答
IE FF故障，在jQuery滑块中有多个谷歌图表
jquery、charts、slider
我有一个6个不同的谷歌图表在一个页面上的jQuery滑块所有的集合。在Chrome中查看一切都是完美的，但在FF和IE中却出现了问题。在FF和IE中，第一个带框的Google Chart是可以的，但是当您将滑块移动到不同的Google Chart时，图例、hAxis和vAxis标题就会被抛出。当图表在滑块之外时，图表就很好。在Google
浏览 0提问于2012-09-10得票数 3
2回答
获取google图表中列的总和
javascript、google-visualization
有没有什么方法可以在google chart table的某一列中获取数据的sum，avg，count？我想让metadata看看桌子外面的那张桌子。
浏览 0提问于2013-02-05得票数 3
1回答
基于CSS Google可视化的滑块颜色配置
javascript、css、google-visualization
我想要自定义谷歌图表滑块在控制图表。滑块标签的默认设置是列标签的名称；滑块拇指和max数字都是蓝色的。我想做三件事: 1)自定义滑块标签，2)更改滑块拇指的颜色，3)更改min-max数字的颜色。为了处理标签问题(1)，我做以下工作：
var Slider1 = new google.visualization.ControlWrapp
浏览 6提问于2014-07-07得票数 0
回答已采纳
1回答
Google LineChart:添加其他图形读数之和的图表
javascript、charts、google-visualization
我有包含4列的图形的数据(X轴值和类型日期时间，以及3Y轴值和类型号)。我正在用3条线(没什么不寻常的)来构建一个图表：// get data to chartDataTableRowschartDataTableRows);
var _chartContainer = $('<div id="_chart"<
浏览 1提问于2018-04-06得票数 4
回答已采纳
1回答
在google图表中通过鼠标悬停进行更新
javascript、google-visualization
我正在使用Google图表来交互地绘制一些数据。例如，将鼠标悬停在第一个图表上的x=1上时，第二个图表将刷新，绘制g(1，y)与y。我能够做到这一点的唯一方法是在javascript中手动绑定mouseover事件，并触发第二个图表</e
浏览 3提问于2012-11-09得票数 2
回答已采纳
1回答
如何格式化谷歌图表数据以显示项目的计数，但按年进行过滤
javascript、json、charts、google-visualization
希望这对stackexchange是合适的。如果没有，我很抱歉。听起来很困惑，把它写下来。['PRJ0002','John Doe','2012'],
['PRJ0003','Jac
浏览 0提问于2016-08-09得票数 1
回答已采纳
1回答
Google的条形图--试图使其水平，但仍然是垂直的。
javascript、charts、google-visualization、bar-chart
我使用的是谷歌的列图表，它工作得很好。然而，对于一些数据，我需要水平图表。不起作用，也就是说，图表仍然是垂直的。其他一切都很好。
有什么问题吗？以及"//对材料条形图的要求是什么？“卑劣？
浏览 0提问于2017-06-11得票数 0
回答已采纳
1回答
我看了看，但找不到任何Netlogo代码，它链接了一组滑块，当一个滑块的值增加时，其他滑块的值就会减少，所以总的值永远不会超过100% (即使总的值可能小于100%)。有没有人试过这个？ 谢谢鲁迪
浏览 26提问于2020-07-02得票数 0
1回答
Google charts控件包装器在Ajax上失败
google-visualization
我正在使用谷歌图表来构建一个图表。当通过浏览器加载时，一切工作正常。
在成功的时候。我使用google.visualization.Dashboard来利用control wrapper和chart wrapper，控件包装器帮助我获得在图形中过滤的滑块类型的东西。然而，在ajax加载中，我得到了值的滑块更改，但它没有显
浏览 0提问于2013-12-04得票数 0
2回答
如何将饼图的值更改为绝对值而不是Google工作表中的百分比
google-sheets、google-sheets-charts
我希望能够将每个水果名称下的百分比更改为绝对数字(相应的数量)。我试图更改‘片标签’，但这只是在切片上添加了数字，这不是本例所期望的结果。下面描述的工作表的链接可以找到这里。如果这是不可能的，我愿意接受去掉所有的百分比，只留下标签。
📷
浏览 0提问于2019-08-02得票数 17
1回答
jQuery AnythingSlider没有显示多个图表
jquery、google-visualization、anythingslider
但是当我尝试使用用Google创建的多个图表时，只会显示第一个列表。当我从滑块中删除第二个图表并将它放在页面的其他位置时，它就会显示得很好。我真的需要把它放进滑块里工作。下面是我创建两个图表的脚本示例：
google.load('visualization', '1', {'packages':['geomap', &#
浏览 3提问于2010-10-22得票数 0
1回答
ARRAYFORMULA的结果可以用作带注释的时间线中的值吗？
google-sheets、formulas、google-sheets-charts、google-sheets-arrayformula
我正在尝试创建一个带有以下数据的带注释的时间线，这些数据存在于另一个工作表上：我正在使用ARRAYFORMULA检索文本。我想将这些值显示为带注释的时间线图，但我一直收到以下错误：我试过了(选择列)Data->Data Validatio
浏览 0提问于2019-01-16得票数 2
回答已采纳
1回答
自定义互动输入范围与谷歌图表(派图)
javascript、html、google-visualization
如何将定制的输入范围与谷歌图表饼图结合起来创建一个交互式图表？google.charts.load('current', {'packages':['corechart']})
浏览 1提问于2016-11-06得票数 1
回答已采纳
1回答
Spotfire交叉表可视化格式
javascript、crosstab、spotfire
当前格式的列标题将是我在垂直轴上的数据，而水平轴将是日期格式。我在网上找不到任何格式与我下面的样本类似的样本。
BR
合资企业
浏览 0提问于2019-02-11得票数 1
1回答
如何用c# mvc包装器动态添加竖线到剑道图？
javascript、c#、html、asp.net-mvc、kendo-ui
我已经在我的c# mvc应用程序中创建了一个kendo图表，并希望在滑块值发生变化时动态绘制一条简单的垂直线(例如绘图带)。滑块更改功能，以及静态绘制绘图带的工作，但当我尝试在滑块的更改事件上动态绘制它时，它什么也不做。图表使用mvc-wrappers进行初始化，方式如下： .Name("stretchAl
浏览 1提问于2019-01-07得票数 1
2回答
在柱状图的Y轴中显示两列或多列的总和
apache-flex、charts、data-visualization
我是flex的新手。它有27列(字段)。所以我使用了27个柱状图。但是，我还必须在两个图表中显示这些摘要。一个图表中的14列和其他图表中的13列的总和。
有没有简单的方法可以做到这一点？比如在数据提供程序中指定一些求和运算。
浏览 1提问于2011-06-08得票数 0
1回答
SSRS堆积柱形图-多列重叠
reporting-services
图表中的列当前在值1的顶部显示值2。这将该列显示为值1和值2的总和。因此，对于第1周，它是109，依此类推。
现在我的问题是，如何让图表显示数据集中每列的总和是最高值？这仍然会显示这两个值，但会使整个列的值最低，其余的值在顶部。因此，对于第一周，总数将是57。值1的<
浏览 1提问于2012-11-14得票数 3
1回答
我怎样才能在python seaborn heatmap旁边有一个栏来显示行值的总和？
python-2.7、pandas、visualization、heatmap、seaborn
我能够生成一个热图，其数量覆盖在图形上，作为透视表的视觉效果。我想在热图旁边有一列，它显示行的总和，我想在热图下有一行，显示列的总和。
pv是我的数据透视表，我用它来生成热图图形。我想在图表的右边有一个列，其中有每一行的相加值。同样，我希望在图表的底部有一行，其中包含每列的相
浏览 1提问于2015-10-28得票数 10
1回答
在Power BI中创建条形图作为已获取的示例
powerbi、power-bi-report-server、powerbi-custom-visuals
我需要创建附加了样本数据集的附加图形类型。需要你的超能力来解决这个问题。 提前谢谢。 ?
浏览 17提问于2019-10-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
