简体   繁体   English

谷歌图表对数刻度

[英]Google charts log scale

I'm trying to do a log scale plot in Google Charts(actually a semilogy plot, to be accurate) and have tried我正在尝试在 Google Charts 中绘制对数刻度图(准确地说,实际上是一个符号图)并尝试过
vAxis: { scaleType: 'log' }
without success.没有成功。 I have seen also Google's example( https://jsfiddle.net/api/post/library/pure/ ), but haven't figured out where I am mistaken.我也看过谷歌的例子( https://jsfiddle.net/api/post/library/pure/ ),但还没有弄清楚我错在哪里。 In order to reproduce my problem I've taken the simple Line Chart where i modified some entry values to look similar like values from f(x) = 1/x , like my actual data is distributed.为了重现我的问题,我采用了简单的折线图,其中我修改了一些条目值,使其看起来类似于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>

My last option parameter vAxis: {scaleType: 'log'} is ignored.我的最后一个选项参数vAxis: {scaleType: 'log'}被忽略。 I ahve tried with both discrete and continuous data(1st column both as strings like above or numbers without the '') My plot looks like the one below我已经尝试使用离散和连续数据(第一列都作为上面的字符串或没有''的数字)我的情节看起来像下面的

日志图测试

using the updated library ( loader.js ) seems to make a difference使用更新的库( loader.js )似乎有所作为

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

instead of...代替...

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

plus, from the release notes ...另外,从发行说明...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently.通过jsapi加载器保持可用的 Google Charts 版本不再持续更新。 Please use the new gstatic loader ( loader.js ) from now on.从现在开始,请使用新的 gstatic 加载器 ( loader.js )。

see following working snippet...请参阅以下工作片段...

 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>

here is the same chart, without the option --> vAxis: {scaleType: 'log'}这是相同的图表,没有选项 --> 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM