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

【问题标题】：Logarithmic scale in material google line chart材料谷歌折线图中的对数刻度
【发布时间】：2016-05-29 22:02:27
【问题描述】：

我无法为我的材料 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>

并产生：

我使用了很多选项组合，但还没有产生任何对数结果。

【问题讨论】：

可能无济于事，但您是否尝试过 google.charts.Line.convertOptions 的“材料”选项？
感谢您的建议。我试过了，但没有用。我检查了一下，如果我把它作为chart.title的标题插入，它确实转换了标题，所以它确实有效。说到chart.title，我也看不到那个记录。有没有我缺少的资源？
它在column chart 的配置选项中列出，但我还没有找到一个完整的列表...
@Bharata，尽管您的回答添加了一些信息，但我在 2 小时前的回答已经解决了这个问题。我同意最后一个答案被异常/人为地投票赞成并且没有任何新内容。
@R.Schifini 您的回答并不能解决问题，因为它只是对您有用的代码转储，而没有任何解释为什么会这样。 Bharata 的回答实际上首先帮助我理解了这个问题。请记住，我们在这里帮助遇到类似问题的每个人，而不仅仅是修复我的代码示例。

标签： javascript charts google-visualization visualization

【解决方案1】：

这是你需要的吗？

这是唯一需要的更改：

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

这里是 interactive docs 与 JSFiddle 示例的链接

<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.visualization.LineChart($(".chart")[0]);
        chart.draw(data, {
            chart: {
                title: "History for ..."
            },
            height: 400,
            width: 800,
            vAxis: {
                logScale: true,
                minValue: 0
            }
        });
    });
</script>

【讨论】：

非常感谢。我之前尝试过，但没有意识到旧的图表 API 出于某种原因不喜欢 options.hAxis 中的 minValue 和 maxValue。 “a.getTime 不是一个函数”你的例子促使我重试，它现在可以工作了。

【解决方案2】：

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

这是一个完全重新设计的 Google Visualization API 实现，遵循 Google 的“材料设计”规范，目前仍处于测试阶段（详情请参阅 here）。

在他们所谓的“经典”图表库中发现的许多功能还没有被带到“材料设计”图表中（参见 this Github issue）。

您可以使用较旧（但支持更好）的 Google Visualization“经典”核心图表包来解决您的问题。在这种情况下，您只需替换代码中的一行。而不是：

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>

【讨论】：

我将此标记为答案，因为它更详细，并解释了为什么我的方法不起作用。请记住，切换到较旧的可视化类型有其缺点。您将不得不切换一些属性（例如，chart.title -> title），在我看来，旧图表的外观更加过时。它仍然实现了我正在寻找的一些小缺点。