谷歌图表数标尺(Google charts log scale)

2019-09-29 19:07发布

站内文章 / 后端开发
23 0 0

我试图做谷歌图表对数刻度图（实际上是一个semilogy情节，是准确的），并尝试
vAxis: { scaleType: 'log' }
没有成功。 我也看到谷歌的例子（ https://jsfiddle.net/api/post/library/pure/ ），但还没有想出我在哪里错了。 为了重现我的问题，我已经采取了简单的折线图，其中我修改了一些项值看起来像从值类似f(x) = 1/x ，像我的实际数据分布。 

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["linechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Index', 'Value'],
                ['1',  100000],
                ['2',  2170],
                ['3',  960],
                ['4',  560],
                ['5',  520],
                ['6',  500],
                ['7',  480],
                ['8',  460],
                ['9',  440],
                ['10',  430],
                ['11',  420],
                ['12',  410],
                ['13',  400],
                ['14',  395],
                ['15',  390],
                ['16',  388],
                ['17',  396],
                ['18',  387],
                ['19',  385],
                ['20',  384]
            ]);

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance', vAxis: {scaleType: 'log'}});
        }
    </script>
</head>

<body>
<div id="chart_div"></div>
</body>
</html>

我最后的选项参数vAxis: {scaleType: 'log'}将被忽略。 我ahve试图与两者（既作为像上面或数字无“”字符串第1列）我的曲线图类似于下一个离散和连续数据

Answer 1:

使用更新后的库（ loader.js ）似乎有所作为

<script src="https://www.gstatic.com/charts/loader.js"></script>

代替...

<script src="https://www.google.com/jsapi"></script>

再加上，从发行说明 ？

即通过保持可用的谷歌图表的版本jsapi装载机不再被持续更新。 请使用新gstatic装载机（ loader.js从现在起）。

看到下面的工作片段... 

 google.charts.load('current', { callback: function () { var data = google.visualization.arrayToDataTable([ ['Index', 'Value'], ['1', 100000], ['2', 2170], ['3', 960], ['4', 560], ['5', 520], ['6', 500], ['7', 480], ['8', 460], ['9', 440], ['10', 430], ['11', 420], ['12', 410], ['13', 400], ['14', 395], ['15', 390], ['16', 388], ['17', 396], ['18', 387], ['19', 385], ['20', 384] ]); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance', vAxis: {scaleType: 'log'}}); }, packages: ['corechart'] }); 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>

这里是相同的图表，而选项- > vAxis: {scaleType: 'log'} 

 google.charts.load('current', { callback: function () { var data = google.visualization.arrayToDataTable([ ['Index', 'Value'], ['1', 100000], ['2', 2170], ['3', 960], ['4', 560], ['5', 520], ['6', 500], ['7', 480], ['8', 460], ['9', 440], ['10', 430], ['11', 420], ['12', 410], ['13', 400], ['14', 395], ['15', 390], ['16', 388], ['17', 396], ['18', 387], ['19', 385], ['20', 384] ]); var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'}); }, packages: ['corechart'] }); 
 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>



文章来源: Google charts log scale
标签： javascript plot charts google-visualization
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~