Google圖表-物料條形圖，轉換選項

Question

我正在嘗試使用“材料條形圖”，因為我想在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 “無濟於事”

有人可以幫我解決這個問題嗎？

Answer 1

當您繪制不帶 -> 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>