javascript - Material 谷歌折线图中的对数刻度

Question

我无法为我的 Material Google 折线图创建对数垂直轴。文档指出我应该在选项中将 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 所谓的 Material 图表。

这是完全重新设计的 Google Visualization API 实现，符合 Google 的“ Material 设计”规范，目前仍处于测试阶段(请参阅详细信息 here )。

在他们所谓的“经典”图表库中发现的许多功能尚未转移到“ Material 设计”图表中(请参阅 this Github issue )。

您可以使用较旧的(但支持更好的)Google 可视化“经典”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 调用。

完整的解决方案

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]);
    var chart = new google.visualization.LineChart(document.querySelector(".chart"));
    chart.draw(data,
    {
        chart: {title: "History for ..."},
        height: 400,
        width: 800,
        vAxis:
        {
            logScale: true,
            minValue: 0
        }
    });
});

<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>