Logarithmic scale in material google line chart

问题

I am not able to create a logarithmic vertical axis for my material Google Line Chart. Documentation states that I should set vAxis.logScale to true in the options, but this leads to no result.

Currently my test reads:

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

And produces:

I have used a lot of combinations of options but I haven't yet produced any logarithmic result.

回答1:

The reason that these features are not working is because the 'line' package that you are loading and the google.charts.Line(...) object that you are using are creating what Google calls a Material Chart.

This is a completely redesigned implementation of the Google Visualization API adhering to Google's "Material Design" specification and is still currently in beta (see details here).

A lot of the features found in what they call the "Classic" chart library have not yet been carried over to the "Material Design" charts (see this Github issue).

You can solve your issue by using the older (but much better supported) Google Visualization "Classic" corechart package. In this case you have to replace only one line in your code. Instead of:

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

you have to write this line:

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

Or, if you do not want to use jQuery (you do not need it) then replace it with this line:

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

and delete jQuery calling.

Complete solution

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>

回答2:

Is this what you need?

This is the only change needed:

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

Here are the interactive docs with links to JSFiddle examples

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

来源：https://stackoverflow.com/questions/35469596/logarithmic-scale-in-material-google-line-chart

标签

javascript

charts

google-visualization

visualization