草庐IT

javascript - Material 谷歌折线图中的对数刻度

coder 2025-04-01 原文

我无法为我的 Material Google 折线图创建对数垂直轴。文档指出我应该在选项中将 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>

并产生:

我已经使用了很多选项的组合，但我还没有产生任何对数结果。

最佳答案

这些功能不起作用的原因是因为您正在加载的 'line' 包和 google.charts.Line(...) 对象您正在使用的是创建 Google 所谓的 Material 图表。

这是完全重新设计的 Google Visualization API 实现，符合 Google 的“ Material 设计”规范，目前仍处于测试阶段(请参阅详细信息 here )。

在他们所谓的“经典”图表库中发现的许多功能尚未转移到“ Material 设计”图表中(请参阅 this Github issue )。

您可以使用较旧的(但支持更好的)Google 可视化“经典”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>

关于javascript - Material 谷歌折线图中的对数刻度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35469596/

图中刻度Date2016newjavascriptchartsgoogle-visualizationvisualization

有关javascript - Material 谷歌折线图中的对数刻度的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. ruby-on-rails - 使用 gmaps4rails 动态加载谷歌地图标记 - 2

    如何只加载map边界内的标记gmaps4rails？当然，在平移和/或缩放后加载新的。与此直接相关的是，如何获取map的当前边界和缩放级别？ 最佳答案 我是这样做的，我只在用户完成平移或缩放后替换标记，如果您需要不同的行为，请使用不同的事件监听器:在你看来(index.html.erb):{"zoom"=>15,"auto_adjust"=>false,"detect_location"=>true,"center_on_user"=>true}},false,true)%>在View的底部添加:functiongmaps4rail

  3. ruby - 使用自定义排序首选项对数组进行排序？ - 2

    有人可以告诉我如何根据自定义字符串对嵌套数组进行排序吗？比如有没有办法排序:[['Red','Blue'],['Green','Orange'],['Purple','Yellow']]“橙色”、“黄色”，然后是“蓝色”？最终结果如下所示:[['Green','Orange'],['Purple','Yellow'],['Red','Blue']]它不是按字母顺序排序的。我很想知道我是否可以定义要排序的值以实现上述目标。 最佳答案 sort_by对于这种排序总是非常方便:a=[['Red','Blue'],['Green','Ora

  4. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  5. ruby - 根据给定顺序对数字数组进行排序 - 2

    我有两个数组。第一个数组包含排序顺序。第二个数组包含任意数量的元素。我的属性是保证第二个数组中的所有元素(按值)都在第一个数组中，而且我只处理数字。A=[1,3,4,4,4,5,2,1,1,1,3,3]Order=[3,1,2,4,5]当我对A进行排序时，我希望元素按照Order指定的顺序出现:[3,3,3,1,1,1,1,2,4,4,4,5]请注意，重复是公平的游戏。A中的元素不应更改，只能重新排序。我该怎么做？ 最佳答案 >>source=[1,3,4,4,4,5,2,1,1,1,3,3]=>[1,3,4,4,4,5,2,1,1

  6. ruby - 按字段的字母顺序对数组中的哈希进行排序 - 2

    我认为这很容易，并且已经很努力地搜索过，但似乎无法让它工作。我有以下哈希:@friends=[{"name"=>"JohnSmith","id"=>"12345"},{"name"=>"JaneDoe","id"=>"23456"},{"name"=>"SamuelJackson","id"=>"34567"},{"name"=>"KateUpton","id"=>"45678"}]我正在尝试按名称的字母顺序对其进行排序。现在我正在这样做:@friends.sort{|a,b|a[0]b[0]}但是，它只是以非字母顺序输出完整结果。 最佳答案

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  9. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  10. ruby - 从谷歌开发者网站下载后，client_secret.json 为空 - 2

    我正在尝试从googleAPI下载client_secret.json。我正在执行https://developers.google.com/gmail/api/quickstart/ruby中列出的步骤.使用此向导在GoogleDevelopersConsole中创建或选择项目并自动启用API。在左侧边栏中，选择同意屏幕。选择电子邮件地址并输入产品名称(如果尚未设置)，然后单击“保存”按钮。在左侧边栏中，选择凭据并点击创建新客户端ID。选择应用程序类型已安装应用程序，已安装应用程序类型为其他，然后单击“创建客户端ID”按钮。点击新客户端ID下的下载JSON按钮。将此文件移动到您的工作

随机推荐