堆栈内存溢出
  繁体   English   中英

加总 label ChartWrapper Google Chart

[英]Add total label ChartWrapper Google Chart

 原文  2020-05-29 20:04:17  8   1    javascript/ charts/ google-visualization

问题描述

如何将每列的总 label 添加到 ChartWrapper 谷歌图表？ 我试图从谷歌图表中搜索文档，但我是谷歌图表的新手，对我来说并不容易。

下面的图片链接是我想要的一个例子。 我想要的例子

按照我下面的代码，这是一个简单的代码。 

 <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', { callback: drawChart_var, packages: ['corechart'] }); function drawChart_var() { var dataChart = new google.visualization.arrayToDataTable( [[{ label: 'Category', type: 'string' },{ label: '', type: 'number' }, { label: 'Base 2', type: 'number' },{ label: 'Base 3', type: 'number' }, { label: 'Base 4', type: 'number' },{ role: 'style', type: 'string', p: { role: 'style' } }], ['VAR', 0, 0, 3.42, 0, '#EEB14C'],['MIX', 0, 3.42, 3.73, 0, '#69AA51'], ['BNS', 0, 3.73, 3.42, 0, '#D53C38'],['MTRL', 0, 3.42, 2.34, 0, '#D53C38'], ['OTHER', 0, 2.34, 2.69, 0, '#69AA51'],['CORP', 0, 2.69, 0.7, 0, '#D53C38'], ['COST', 0, 0.7, 1.94, 0, '#69AA51'],['PNL', 0, 1.94, 0, 0, '#EEB14C']] ); var options = { animation: {duration: 1500,easing: 'inAndOut',startup: true}, backgroundColor: 'transparent',bar: {group: {width: '85%'}}, chartArea: {left: 50,right: 20,bottom: 60,top: 50,width: "100%",height: "70%"}, hAxis: {textStyle: {fontSize: 12}}, height: 400, legend: 'none', seriesType: 'bars', series: {0: {type: 'candlesticks'}}, tooltip: {isHtml: true,trigger: 'both'}, vAxis: {format: 'short',textStyle: {color: '#616161'},viewWindow: {min: 0,max: 11}}, width: '100%', annotations: {stem: {color: "transparent",length: 100}, textStyle: {color: "#000000",fontSize: 16,}} }; var chart = new google.visualization.ChartWrapper(); chart.setChartType('ComboChart'); chart.setDataTable(dataChart); chart.setContainerId('chart_var'); chart.setOptions(options); chart.draw(); } </script> </head> <body> <div id="chart_var"></div> </body> </html>

1 个解决方案

解决方案1
 1 已采纳  2020-06-02 11:58:29

要在条形上方添加标签，您可以使用注释列角色。

{ role: 'annotation', type: 'string' }

但是，在这种情况下，烛台系列不支持注释。
您可以通过查看每种图表类型的数据格式来检查支持哪些角色。

因此，我们需要添加第二个条形系列，然后添加注释列。

{ label: 'bar series', type: 'number' },{ role: 'annotation', type: 'string' }

请参阅以下工作示例，对于条形系列，我们只使用零值... 

 google.charts.load('current', { callback: drawChart_var, packages: ['corechart'] }); function drawChart_var() { var dataChart = new google.visualization.arrayToDataTable( [[{ label: 'Category', type: 'string' },{ label: '', type: 'number' }, { label: 'Base 2', type: 'number' },{ label: 'Base 3', type: 'number' }, { label: 'Base 4', type: 'number' },{ role: 'style', type: 'string', p: { role: 'style' } }, { label: 'bar series', type: 'number' },{ role: 'annotation', type: 'string' }], ['VAR', 0, 0, 3.42, 0, '#EEB14C', 0, '3.42'],['MIX', 0, 3.42, 3.73, 0, '#69AA51', 0, '0.31'], ['BNS', 0, 3.73, 3.42, 0, '#D53C38', 0, '-0.31'],['MTRL', 0, 3.42, 2.34, 0, '#D53C38', 0, '-1.08'], ['OTHER', 0, 2.34, 2.69, 0, '#69AA51', 0, '0.35'],['CORP', 0, 2.69, 0.7, 0, '#D53C38', 0, '-1.99'], ['COST', 0, 0.7, 1.94, 0, '#69AA51', 0, '1.24'],['PNL', 0, 1.94, 0, 0, '#EEB14C', 0, '1.94']] ); var options = { animation: {duration: 1500,easing: 'inAndOut',startup: true}, backgroundColor: 'transparent',bar: {group: {width: '85%'}}, chartArea: {left: 50,right: 20,bottom: 60,top: 50,width: "100%",height: "70%"}, hAxis: {textStyle: {fontSize: 12}}, height: 400, legend: 'none', seriesType: 'bars', series: {0: {type: 'candlesticks'}}, tooltip: {isHtml: true,trigger: 'both'}, vAxis: {format: 'short',textStyle: {color: '#616161'},viewWindow: {min: 0,max: 11}}, width: '100%', annotations: {stem: {color: "transparent",length: 100}, textStyle: {color: "#000000",fontSize: 16,}} }; var chart = new google.visualization.ChartWrapper(); chart.setChartType('ComboChart'); chart.setDataTable(dataChart); chart.setContainerId('chart_var'); chart.setOptions(options); chart.draw(); }
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_var"></div>

编辑

至于注释的position。 假设我们对注释所在的列使用零值，则 position 由选项设置 --> annotations.stem.length = 100意味着它将始终距离图表底部 100 个像素。

为了使 position 动态化，我们需要删除length选项，并给列一个大于零的值。 列值应该是烛台的最大值。

要找到最大值，我们可以使用数据表方法 --> getColumnRange(colIndex)此方法将返回一个 object，其中包含我们提供的列的最小值和最大值的属性。

我们需要找到 Base 2 和 Base 3 列之间的最大值。

// find max height
var maxBase2 = dataChart.getColumnRange(2);
var maxBase3 = dataChart.getColumnRange(3);
var maxColumn = Math.max(maxBase2.max, maxBase3.max);

然后用最大值更新我们的注释列。

// update column values to max
for (var i = 0; i < dataChart.getNumberOfRows(); i++) {
  dataChart.setValue(i, 6, maxColumn);
}

要确保注释显示在列的顶部，请添加选项 --> alwaysOutside

annotations: {
  alwaysOutside: true,
  stem: {color: 'transparent'},
  textStyle: {color: '#000000',fontSize: 16}
}

再次，删除length选项。

并将列系列的颜色设置为透明。

  1: {color: 'transparent'}

这将导致注释始终出现在烛台上方。

请参阅以下工作片段... 

 google.charts.load('current', { callback: drawChart_var, packages: ['corechart'] }); function drawChart_var() { var dataChart = new google.visualization.arrayToDataTable( [[{ label: 'Category', type: 'string' },{ label: '', type: 'number' }, { label: 'Base 2', type: 'number' },{ label: 'Base 3', type: 'number' }, { label: 'Base 4', type: 'number' },{ role: 'style', type: 'string', p: { role: 'style' } }, { label: 'bar series', type: 'number' },{ role: 'annotation', type: 'string' }], ['VAR', 0, 0, 3.42, 0, '#EEB14C', 0, '3.42'],['MIX', 0, 3.42, 3.73, 0, '#69AA51', 0, '0.31'], ['BNS', 0, 3.73, 3.42, 0, '#D53C38', 0, '-0.31'],['MTRL', 0, 3.42, 2.34, 0, '#D53C38', 0, '-1.08'], ['OTHER', 0, 2.34, 2.69, 0, '#69AA51', 0, '0.35'],['CORP', 0, 2.69, 0.7, 0, '#D53C38', 0, '-1.99'], ['COST', 0, 0.7, 1.94, 0, '#69AA51', 0, '1.24'],['PNL', 0, 1.94, 0, 0, '#EEB14C', 0, '1.94']] ); // find max height var maxBase2 = dataChart.getColumnRange(2); var maxBase3 = dataChart.getColumnRange(3); var maxColumn = Math.max(maxBase2.max, maxBase3.max); // update column values to max for (var i = 0; i < dataChart.getNumberOfRows(); i++) { dataChart.setValue(i, 6, maxColumn); } var options = { animation: {duration: 1500,easing: 'inAndOut',startup: true}, backgroundColor: 'transparent',bar: {group: {width: '85%'}}, chartArea: {left: 50,right: 20,bottom: 60,top: 50,width: '100%',height: '70%'}, hAxis: {textStyle: {fontSize: 12}}, height: 400, legend: 'none', seriesType: 'bars', series: { 0: {type: 'candlesticks'}, 1: {color: 'transparent'} }, tooltip: {isHtml: true,trigger: 'both'}, vAxis: {format: 'short',textStyle: {color: '#616161'},viewWindow: {min: 0,max: 11}}, width: '100%', annotations: { alwaysOutside: true, stem: {color: 'transparent'}, textStyle: {color: '#000000',fontSize: 16} } }; var chart = new google.visualization.ChartWrapper(); chart.setChartType('ComboChart'); chart.setDataTable(dataChart); chart.setContainerId('chart_var'); chart.setOptions(options); chart.draw(); }
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_var"></div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Google图表中ChartWrapper中的图表格式 谷歌图表 ChartWrapper 获取无效的列索引 Google Visualization Chartwrapper选择图表元素 使用Chartwrapper将Google地图和polyLine添加到Google图表仪表板 如何将总计添加到Google图表中的图表 在Google饼图甜甜圈中间添加标签 Google Chart API-为饼图标签添加百分比 Google 可视化堆积面积图：将总计添加到工具提示 如何在Google Pie Chart中添加图例和标签？ google.visualization.ChartWrapper组列视图
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM