Я пытаюсь использовать таблицу материалов, потому что я хочу изменить формат K для тысяч в данных Vaxis. Я хочу показать как 1000 не как 1k. Когда я использую следующий код для диаграммы, он кажется okey, но я не могу настроить 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 "ничего не работает"
Может кто-то, пожалуйста, помогите мне, что с этим не так?
когда вы рисуете диаграмму без → 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>
Примечание. Существует несколько вариантов, которые не поддерживаются диаграммами Material.
см. → Отслеживание проблемы для спецификации материала.
это включает в себя → 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>