谷歌图表对数刻度答案

【问题标题】：Google charts log scale谷歌图表对数刻度
【发布时间】：2016-10-31 23:38:04
【问题描述】：

我正在尝试在 Google Charts 中绘制对数刻度图（准确地说是符号图）并尝试过
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'} 被忽略。我已经尝试过使用离散数据和连续数据（第一列都作为上面的字符串或没有''的数字）我的情节看起来像下面的那个

【问题讨论】：

标签： javascript plot charts google-visualization

【解决方案1】：

使用更新的库 (loader.js) 似乎有所作为

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

而不是……

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

另外，来自release notes...

通过jsapi 加载程序仍然可用的 Google Charts 版本不再持续更新。请从现在开始使用新的 gstatic 加载程序 (loader.js)。

请参阅以下工作 sn-p...

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 文档有时会与所有频繁的更改混淆。
@WhiteHat，你能告诉我如何在气泡图中使用对数刻度来表示时间序列吗？我在任何可以为时间序列示例使用对数刻度的地方都找不到它，我尝试了下面的链接，但无法使其适用于 x 轴上的对数刻度时间序列。 developers.google.com/chart/interactive/docs/…