将变量传递到highcharts solid gauge

时间:2017-05-06 00:30:52

标签: javascript jsp highcharts

我在下面有一个简单的例子,我在一个scriptlet中生成。如何将变量“z”传递到下面的highcharts代码中以生成图表? scriptlet中的数据是否需要位于?感谢。

          <%

            double z = 0;
            z = (73.56/100)*100;

          %>

<script>

var chartRpm = Highcharts.chart('container-rpm', Highcharts.merge(gaugeOptions, {
yAxis: {
    min: 0,
    max: 5,
    title: {
        text: 'RPM'
    }
},

series: [{
    name: 'RPM',
    data: [1],
    dataLabels: {
        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
               '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
    },
    tooltip: {
        valueSuffix: ' revolutions/min'
    }
  }]

}));

   // Bring life to the dials
setInterval(function () {
   // Speed
var point,
    newVal,
    inc;

if (chartSpeed) {
    point = chartSpeed.series[0].points[0];
    inc = Math.round((Math.random() - 0.5) * 100);
    newVal = point.y + inc;

    if (newVal < 0 || newVal > 200) {
        newVal = point.y - inc;
    }

    point.update(newVal);
}

// RPM
if (chartRpm) {
    point = chartRpm.series[0].points[0];
    inc = Math.random() - 0.5;
    newVal = point.y + inc;

    if (newVal < 0 || newVal > 5) {
        newVal = point.y - inc;
    }

    point.update(newVal);
  }
 }, 2000);

</script>

1 个答案:

答案 0 :(得分:0)

要将变量从scriplet代码传递给js代码,您可以使用以下语法:

<%
  double someVar = 0;
%>

<script>
  var someVarFromJSP = <%= someVar %>
</script>

因此,要将z变量用作仪表图表的数据,您必须按以下方式修改其配置:

var chartRpm = Highcharts.chart('container-rpm', Highcharts.merge(gaugeOptions, {
yAxis: {
    min: 0,
    max: 5,
    title: {
        text: 'RPM'
    }
},

series: [{
    name: 'RPM',
    data: [<%= z %>],
    dataLabels: {
        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
               '<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
    },
    tooltip: {
        valueSuffix: ' revolutions/min'
    }
  }]

}));