材料谷歌折线图中的对数刻度

Question

我无法为我的素材Google Line Chart创建对数垂直轴.文件规定,我应该设置vAxis.logScale到true在选项,但是这将导致没有结果.

目前我的测试是:

<div class="chart"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load("current", { "packages": [ "line", "corechart" ]});
    google.charts.setOnLoadCallback(function() {
        var data = new google.visualization.DataTable();
        data.addColumn("date", "Date");
        data.addColumn("number", "1");
        data.addColumn("number", "2");

        data.addRows([
            [ new Date(2016, 0, 27), 684130172, -1 ], [ new Date(2016, 0, 28), 684189642, -1 ], [ new Date(2016, 0, 29), 684837381, 122895 ], [ new Date(2016, 0, 30), 685595817, 238244 ], [ new Date(2016, 0, 31), 686690845, 239450 ], [ new Date(2016, 1, 1), 688391639, 536141 ], [ new Date(2016, 1, 2), 691181274, 1651530 ], [ new Date(2016, 1, 3), 693040518, 1698813 ], [ new Date(2016, 1, 4), 694335907, 2271617 ], [ new Date(2016, 1, 5), 694978502, 2314718 ], [ new Date(2016, 1, 6), 696142818, 2314758 ], [ new Date(2016, 1, 7), 698869181, 3234042 ], [ new Date(2016, 1, 8), 700446296, 3338104 ], [ new Date(2016, 1, 9), 705552668, 6175539 ], [ new Date(2016, 1, 10), 707540295, 6812427 ], [ new Date(2016, 1, 11), 707766077, 6831641 ], [ new Date(2016, 1, 12), 707922926, 6839607 ], [ new Date(2016, 1, 13), 708061736, 6883806 ], [ new Date(2016, 1, 14), 713986011, 10366780 ], [ new Date(2016, 1, 15), 717491978, 12527120 ], [ new Date(2016, 1, 16), 719057078, 12794871 ], [ new Date(2016, 1, 17), 723813184, 14959625 ],      ]);

        var chart = new google.charts.Line($(".chart")[0]);
        chart.draw(data, {
            chart: {
                title: "History for ..."
            },
            height: 400,
            width: 800,
            vAxis: {
                logScale: true,
                minValue: 0
            }
        });
    });
</script>

并产生:

我已经使用了很多选项组合,但我还没有产生任何对数结果.

Answer 1

这些功能不起作用的原因是'line'您正在加载的包和google.charts.Line(...)您正在使用的对象正在创建 Google 所谓的材质图表。

这是完全重新设计的 Google Visualization API 实现，遵循 Google 的“Material Design”规范，目前仍处于测试阶段（请参阅此处的详细信息）。

他们所谓的“经典”图表库中的许多功能尚未转移到“Material Design”图表中（请参阅此 Github 问题）。

您可以使用较旧的（但支持更好）Google Visualization“Classic”corechart 包来解决您的问题。在这种情况下，您只需替换代码中的一行。代替：

var chart = new google.charts.Line($(".chart")[0]);

你必须写这一行：

var chart = new google.visualization.LineChart($(".chart")[0]);

或者，如果您不想使用 jQuery（您不需要它），则将其替换为以下行：

var chart = new google.visualization.LineChart(document.querySelector(".chart"));

并删除 jQuery 调用。

完整的解决方案

var chart = new google.charts.Line($(".chart")[0]);

var chart = new google.visualization.LineChart($(".chart")[0]);