我无法为我的素材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>
并产生:
我已经使用了很多选项组合,但我还没有产生任何对数结果。
答案 0 :(得分:3)
这是您需要的吗?
这是唯一需要的更改:
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>
答案 1 :(得分:2)
这些功能无法使用的原因是因为您正在加载的'line'
程序包和您正在使用的google.charts.Line(...)
对象正在创建Google所谓的物料图。
这是Google Visualization API的完全重新设计的实现,它遵循Google的“材料设计”规范,并且仍处于测试阶段(请参阅详细说明 here )。
在他们称为“经典”图表库中找到的许多功能尚未转移到“材料设计”图表中(请参见 this Github issue )。
您可以使用较旧(但受支持得多)的Google Visualization“经典” 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>