具有两个动态日期的Highcharts标题文本

时间:2013-08-05 19:32:51

标签: jsp dynamic highcharts title

在我的JSP页面中,我已经集成了highcharts图。

以下代码从上一页获取2个不同的日期:

String T1=request.getParameter("T1");
String T2=request.getParameter("T2");

我想将这两个日期有效地传递到highcharts图的标题文本中。请帮助我获取代码。

以下是highcharts中的标题文字代码:

title: {
                text: 'Database Status From ${T1} to ${T2}',
                    style: {fontSize: '10px'}
            },

2 个答案:

答案 0 :(得分:1)

我为你做了一个小提琴:http://jsfiddle.net/96AhK/

$(function () {
    var valdt1 = 'T1'; //<%=request.getParameter("T1") %>
    var valdt2 = 'T2';  //<%=request.getParameter("T2") %>
    chart = new Highcharts.Chart(
        { chart: { renderTo: 'PIE', 
                  plotBackgroundColor: null, 
                  plotBorderWidth: null, 
                  plotShadow: false,
                  type: 'pie'}, 
         title: { 
             text: 'Database Status From ' + valdt1 +' To ' + valdt2, 
             style: {fontSize: '10px'}
         },
         xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

我不得不更换服务器端代码(request.getParameter)以使其在jsfiddle中工作,但是你的代码对我来说是正确的。使用变量时,通过将各个部分连接在一起来构建字符串:

text: 'Database Status From ' + valdt1 +' To ' + valdt2, 

答案 1 :(得分:0)

以下是在实施(Barbara)建议后正常运行的代码:

<script>

$(function () {
    var chart;

var val1 = '<%=instdbout %>';
var val2 = '<%=seconds %>';

var result1 = (val1 / val2) * 100;
var result2 = 100 - result1;

var valdt1 = '<%=request.getParameter("T1") %>';
var valdt2 = '<%=request.getParameter("T2") %>';

    $(document).ready(function() {

        // Radialize the colors
        Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
            return {
                radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });

        // Build the chart 1
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'PIE',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: { 
             text: 'Database Status From ' + valdt1 +' To ' + valdt2, 
             style: {fontSize: '10px'}
         },