[英]Google Charts - Material Bar Chart, Convert Options
我正在尝试使用“材料条形图”,因为我想在Vaxis数据上更改数千个K格式。 我想显示为1000,而不是1k。 当我在图表上使用以下代码时,看起来不错,但是我无法自定义Vaxis;
<script>
Array.prototype.insert = function ( index, item ) {
this.splice( index, 0, item );
};
function all(arr2,test){
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
if(arrGrp[0].length == 2)
{
arr2.push([' ', null]);
}
var data = google.visualization.arrayToDataTable(arr2);
console.log("ARR: " + arr2);
var options = {
title: 'Min: ' + min +' Max: ' + max ,
bars:'vertical',
bar: {groupWidth: "25%"},
height: 400,
vAxis: {
format: 'decimal',
minValue: min,
maxValue: max,
viewWindowMode : 'explicit',
viewWindow: {
max:max,
min:min
},}};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
var arrGrp=[];
</script>
然后按以下方式填充数据;
@{
var grpHeader2 = Model.GroupBy(r => new { r.GradeId, r.Grade }).ToList();
<script>
var arr = [];
var rowIndex=0;
arr.insert(rowIndex,'Date');
rowIndex++;
@foreach (var grpHeaderItem in grpHeader2)
{
<text>
arr.insert(rowIndex,'@(Html.Raw(grpHeaderItem.Key.Grade))');
rowIndex++;
</text>
}
arrGrp.push(arr);
max='@(Model.Max(r=>r.MaxScore).HasValue ? Model.Max(r => r.MaxScore) : -1 )';
min='@(Model.Min(r=>r.MinScore).HasValue ? Model.Min(r => r.MinScore) : -1 )';
</script>
}
@foreach (var item in Model.GroupBy(r => new { r.PlannedDate }))
{
<script>
var arr = [];
var rowIndex=0;
@*arr.insert(rowIndex,new Date(@item.Key.PlannedDate.Year,@item.Key.PlannedDate.Month,@item.Key.PlannedDate.Day));*@
arr.insert(rowIndex,'@item.Key.PlannedDate.ToString("dd.MM.yyyy")');
rowIndex++;
@foreach (var grpHeaderItem in grpHeader2)
{
<text>
arr.insert(rowIndex,@(Model.Where(r=>r.PlannedDate == item.Key.PlannedDate && grpHeaderItem.Key.GradeId == r.GradeId).Select(r=>r.GradeMin).FirstOrDefault()));
rowIndex++;
</text>
}
arrGrp.push(arr);
</script>
}
@{
<script>
all(arrGrp,'@(Html.Raw(ViewBag.Exam))');
</script>
屏幕截图为[1]: https : //imgyukle.com/i/1.xElyj “之前-工作但没有自定义”但是更改代码时
chart.draw(数据,选项);
至
chart.draw(data,google.charts.Bar.convertOptions(options));
看起来像; [2]: https : //imgyukle.com/i/2.xE348 “无济于事”
有人可以帮我解决这个问题吗?
当您绘制不带 -> google.charts.Bar.convertOptions
的图表时,
图表将忽略-> vAxis.viewWindow.min
和max
的选项,
所以图表绘制得很好...
google.charts.load('current', { packages:['bar'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['Date', 'Reading', 'Writing', 'Reading & Writing', 'Math', 'Total'], ['07.08.2018', 220, 230, 450, 610, 1060] ]); var min = -1; var max = -1; var options = { title: 'Min: ' + min +' Max: ' + max , bars:'vertical', bar: {groupWidth: "25%"}, height: 400, vAxis: { format: 'decimal', minValue: min, maxValue: max, viewWindowMode : 'explicit', viewWindow: { max:max, min:min } } }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, (options)); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
当您使用 -> google.charts.Bar.convertOptions
绘制图表时 ,
它使用了min
和max
选项,但根据图片,
min
和max
都设置为-> -1
,
没有满足此条件的行,
所以图表是空白的...
google.charts.load('current', { packages:['bar'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['Date', 'Reading', 'Writing', 'Reading & Writing', 'Math', 'Total'], ['07.08.2018', 220, 230, 450, 610, 1060] ]); var min = -1; var max = -1; var options = { title: 'Min: ' + min +' Max: ' + max , bars:'vertical', bar: {groupWidth: "25%"}, height: 400, vAxis: { format: 'decimal', minValue: min, maxValue: max, viewWindowMode : 'explicit', viewWindow: { max:max, min:min } } }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
注意: 材料图表不支持多个选项。
请参阅-> 物料图特征奇偶校验的跟踪问题
这包括-> vAxis.minValue
, vAxis.maxValue
和vAxis.format
但是vAxis.viewWindow.min
和max
正常工作,并且与vAxis.minValue
和vAxis.maxValue
相同
要格式化y轴,请使用-> vAxes
(带有e )-分别格式化每个轴,这里您只有一个
vAxes: {
0: {
format: 'decimal'
}
}
请参阅以下工作片段...
google.charts.load('current', { packages:['bar'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['Date', 'Reading', 'Writing', 'Reading & Writing', 'Math', 'Total'], ['07.08.2018', 220, 230, 450, 610, 1060] ]); var min = 0; var max = 1200; var options = { title: 'Min: ' + min +' Max: ' + max , bars:'vertical', bar: {groupWidth: "25%"}, height: 400, vAxis: { viewWindow: { max:max, min:min } }, vAxes: { 0: { format: 'decimal' } } }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.