javascript - ColumnChart 不显示所有字符串标签
问题描述
我有以下与 ColumnChart ( https://developers.google.com/chart/interactive/docs/gallery/columnchart ) 相关的问题。
如果标签(当您将鼠标悬停在任何看起来像工具提示的列上时)设置为数字,则所有 2000 个项目都会正确显示。但如果标签设置为字符串,则图表中仅显示 289 个项目,并且由于未知原因缺少 1711 列。
我有这个代码(用字符串设置标签,只显示 289 个项目而不是 2000 个):http: //jsfiddle.net/c809mbjx/11/
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string' ,'Day');
data.addColumn('number', 'Matches');
var dataArray = []
let number = 2000
data.addRows(number);
for (var i = 0; i < number;i++) {
data.setCell(i,0,"aaa_"+i)
data.setCell(i,1,i);
}
//var data = new google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
colors: ['#0095e8'],
hAxis: {textPosition: 'none'},
vAxis: {minValue: 0, viewWindow: {min: 0}},
legend: 'none',
animation: {duration: 10000, easing: 'out'}
};
chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
这段代码(标签设置为数字并正常工作):http: //jsfiddle.net/c809mbjx/12/
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number' ,'Day');
data.addColumn('number', 'Matches');
var dataArray = []
let number = 2000
data.addRows(number);
for (var i = 0; i < number;i++) {
data.setCell(i,0,i)
data.setCell(i,1,i);
}
//var data = new google.visualization.arrayToDataTable(dataArray);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
colors: ['#0095e8'],
hAxis: {textPosition: 'none'},
vAxis: {minValue: 0, viewWindow: {min: 0}},
legend: 'none',
animation: {duration: 10000, easing: 'out'}
};
chart.draw(view, options);
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
解决方案
我们可以在 x 轴上使用数字,并且仍然在工具提示上显示字符串。
这可以通过设置setCell
方法的最后一个参数来完成 -->formattedValue
setCell(rowIndex, columnIndex, value, formattedValue)
默认情况下,工具提示将显示格式化的值。
所以我们提供数字作为值,我们自己的字符串作为格式化值。
data.setCell(i,0,i,"aaa_"+i);
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number' ,'Day');
data.addColumn('number', 'Matches');
let number = 2000;
data.addRows(number);
for (var i = 0; i < number;i++) {
data.setCell(i,0,i,"aaa_"+i);
data.setCell(i,1,i);
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
colors: ['#0095e8'],
hAxis: {textPosition: 'none'},
vAxis: {minValue: 0, viewWindow: {min: 0}},
legend: 'none',
animation: {duration: 10000, easing: 'out'}
};
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
注意:使用加载的谷歌图表版本jsapi
已被弃用,不应再使用。
相反,使用loader.js
,这只会更改加载语句。
见上面的片段...
推荐阅读
- reactjs - React/Socket.io 消息传递应用程序在本地工作,在 heroku 上成功构建,加载时返回 404
- javascript - 运行时间很长的子进程偶尔会无限期冻结(Node.js)
- azure-devops - 如何在 Azure 发布管道的 Azure Powershell 任务中使用链接变量组中的秘密变量?
- typescript - 具有未知键的属性的 Io-ts 接口
- python - 如何将表示为字符串的二进制数拆分为子字符串
- regex - 如何在 VSCode 的搜索和替换中匹配不包含字符串的字符串?
- react-native - Expo 无法识别 .d.ts 文件
- node.js - 用数据库中的产品组织尺寸/颜色的最佳方法
- sql - 在 SQL Server Express 中获取 SQL 实例返回错误
- python - django url dispatcher 的问题,无法解析 url