时间戳

首页 > 解决方案 > 如何在与从 Google Charts 获取图表相关的服务器上的脚本中提取附加到 URL 的参数？

javascript - 如何在与从 Google Charts 获取图表相关的服务器上的脚本中提取附加到 URL 的参数？

问题描述

我正在尝试在我的网络空间上设置一项服务，该服务将接收附加到 URL 的参数。然后在脚本中将它们提取到服务器上，用接收到的参数替换默认参数以生成图表。

我只是在一周内使用 html、javascript、jquery 和 google 图表。在某些方面采取了一些快速的在线教程。所以我是新手。请原谅术语错误！

基本上在网络浏览器中，将使用附加参数输入 url。服务器上的脚本接收 url，提取参数并将它们放在代码中默认值所在的位置。index.htm 文件中有一段代码，用于定义 Google 图表的属性。url 参数是列的值。从那里发送到 Google Charts API 的请求，返回生成的图表，然后在用户的浏览器窗口中可见。

我已经为图表制作了一个示例代码（见附件）。现在我正在寻找一种简单的方法来做我上面所说的。我已经阅读了“param”、“get”、“set”，并看过很多示例代码，有和没有 jquery 等。每个人都以自己的方式和各种复杂性来做。我试图将这些方法实现到我的代码，但是有很多我无法解决的错误。不幸的是，对于某些代码来说，确切的放置位置对我来说并不明显，因为在示例中它位于某个位置，这对我来说不起作用（对不起我已经包含了更多的代码行，就像人们在这里向你展示的那样，但我有必要理解它）。

您能否帮助我，在我提供的示例代码中向我展示如何为图表的三列做到这一点？

网址可能如下所示： https ://example.org/?c1=10&c2=12&c3=7

在代码中，为简单起见，参数具有相同的名称 c1、...。此外，代码图像：https ://imgur.com/ns1hL2P

感谢您的任何帮助！凯登

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="chartA"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChartColumnChart);
function drawChartColumnChart(){
    var data = google.visualization.arrayToDataTable([['',''],['c1',1],['c2',2],['c3',3]
],false);
    var options = {"axisTitlesPosition":"out","width":"900","height":"500","focusTarget":"datum",
    "animation":{"easing":"linear"},"bars":"horizontal"};
    var chart = new google.visualization.ColumnChart(document.getElementById('chartA'));
    chart.draw(data, options);
}
</script>
</body>
</html>

标签： javascriptjqueryhtml

解决方案

您可以使用getParameterByName(name, url)提取参数

var url = 'https://example.org/?c1=10&c2=12&c3=7'
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var c1 = getParameterByName('c1', url);
console.log(c1);
// your function liket this
/*
function drawChartColumnChart(){
    var c1 = getParameterByName('c1', url);
    var c2 = getParameterByName('c2', url);
    var c3 = getParameterByName('c3', url);
    var data = google.visualization.arrayToDataTable([['',''],['c1',c1],['c2',c2],['c3',c3];
],false);

*/

推荐阅读