我正在尝试使用“材料条形图”,因为我想在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(数据,google.charts.Bar.convertOptions(选项));
看起来像; [2]:https://imgyukle.com/i/2.xE348“无济于事”
有人可以帮助我这是什么问题吗?
答案 0 :(得分:0)
绘制图表时不-> 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>
注意:材质图表不支持某些选项。
参见-> Tracking Issue for Material Chart Feature Parity
这包括-> 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>