谷歌图表 - 材料条形图，转换选项

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>

注意：材料图表不支持几个选项。
见 --> 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'
  }
}

请参阅以下工作 sn-p...

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>