Question

HTML：

<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="myscripts.js"></script>
</head>
<body>
<h1>Sample Burndown Chart</h1>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

myscript.js：

$(function () {
  $('#container').highcharts({
    title: {
      text: 'Burndown Chart',
      x: -20 //center
    },
    xAxis: {
      categories: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6',
                   'Day 7', 'Day 8', 'Day 9', 'Day 10']
    },        
    series: [{
      name: 'Ideal Burn',
      color: 'rgba(255,0,0,0.25)',
      lineWidth: 2,
      data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]
    }, {
      name: 'Actual Burn',
      color: 'rgba(0,120,200,0.75)',
      marker: {
        radius: 6
      },
      data: [100, 110, 85, 60, 60, 30, 32, 23, 9, 2]
    }]
  });
});

代码有效，我确实看到了漂亮的燃尽图。

但是，有人可以告诉我最简单/正确的方法将参数传递给myscript.js中的javascript函数数据。

换句话说，而不是：

第1天，第2天，第3天......

我会通过实际日期。

而不是100,110,85 ...... 我会传递正确的数据值。

请告知。

编辑：
哈希映射从服务器端传递到前端。

return descriptor.getHtml("view", data);

视图是html文件。

所以我可以使用$ key_name

访问数据中的任何值/对象

Answer 1

理想情况下，我认为您应该从服务器获取数据，如果在您的上下文中可以实现，则@LMulvey建议它取决于您从何处获取数据。假设您有API和API来获取值，您可以使用jQuery中的$.ajax()方法，并在响应中填充图表的data和categories的值。希望有所帮助，欢呼，sigfried。

Answer 2

在您的情况下，只需写下：

<script>var myVar = 'myValue';</script>

从后端逻辑到页面。您的变量现在可用作全局变量。在加载并执行尝试访问它的脚本之前，请务必在页面上包含此脚本。

Answer 3

这似乎对我有用：

<强> HTML：

<h1>Sample Burndown Chart</h1>
<div id="container" data-param1="heyaaa" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<强> myscripts.js：

$(function () {

  var $cont = $("#container");
  var val1 = $cont.data('param1');
  alert(val1);

  $('#container').highcharts({
    title: {
      text: val1,
      x: -20 //center
  },

图表标题已正确更新。

这是正确的做事方式吗？还是有更干净的方式？我可能还需要添加param2和param3。（看起来有点难看我的眼睛）

如何将参数从html传递给javascript函数

3 个答案: