1

当日のアクティビティを取得してグラフに表示したい棒グラフがあります。これは、以下の myservice にパラメーターとして送信される特定の日に問題なく機能します。テキスト入力でグラフ化された日を変更できるようにしたい。以下で呼び出される getChartData メソッドでは、チャートはレンダリングされません。これはなぜでしょうか？

$(function () {
  var chart;
  $(document).ready(function () {
    var options = {
      chart : {
        renderTo : 'container',
        type : 'column'
      },
      title : {
        text : 'Total by Time',
        x : -20 //center
      },            
      xAxis : {
        categories : ['1am', '2am', '3am', '4am', '5am', '6am', '7am', '8am', '9am', '10am', '11am', '12pm', '1pm',
          '2pm', '3pm', '4pm', '5pm', '6pm', '7pm', '8pm', '9pm', '10pm', '11pm', '12am']
      },
      yAxis : {
        min : 0,
        title : {
          text : 'Total'
        },
        stackLabels : {
          enabled : true,
          style : {
            fontWeight : 'bold',
            color : (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
          }
        }
      },
      tooltip : {
        formatter : function () {
          return '<b>' + this.series.name + '</b><br/>' +
          this.x + ': ' + this.y;
        }
      },
      legend : {
        layout : 'vertical',
        align : 'right',
        verticalAlign : 'top',
        x : -10,
        y : 100,
        borderWidth : 0
      },
      plotOptions : {
        column : {
          stacking : 'normal',
          dataLabels : {
            enabled : true,
            color : (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
          }
        }
      },
      series : []
    };      
    getChartData();
  });   
});

function getChartData() {
  $.getJSON('http://localhost:8080/myservice/2012-03-23', function (data) {

    options.series = data;
    // Create the chart
    var chart = new Highcharts.Chart(options);
  });   
}
4

2 に答える 2

0

フォーム送信から 2 つのパラメータが送信された場合、これらのパラメータを取得して、次のように getChartData URL で値を使用できます。

 parts = window.location.search.substr(1).split("&");
 var $_GET = {};
 var custNoPart = parts[0].split("=");
 var dayDatePart = parts[1].split("=");

 var param1 = $_GET[decodeURIComponent(custNoPart[0])] = decodeURIComponent(custNoPart[1]);

  var param2 = $_GET[decodeURIComponent(custNoPart[1])] = decodeURIComponent(dayDatePart[1]);
于 2012-10-31T17:47:31.337 に答える
-1

これを試して：

$(function () {
  var chartOptions = {
    chart : {
      renderTo : 'container',
      type : 'column'
    },
    title : {
      text : 'Total by Time',
      x : -20 //center
    },
    xAxis : {
      categories : ['1am', '2am', '3am', '4am', '5am', '6am', '7am', '8am', '9am', '10am', '11am', '12pm', '1pm',
        '2pm', '3pm', '4pm', '5pm', '6pm', '7pm', '8pm', '9pm', '10pm', '11pm', '12am']
    },
    yAxis : {
      min : 0,
      title : {
        text : 'Total'
      },
      stackLabels : {
        enabled : true,
        style : {
          fontWeight : 'bold',
          color : (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    tooltip : {
      formatter : function () {
        return '<b>' + this.series.name + '</b><br/>' +
        this.x + ': ' + this.y;
      }
    },
    legend : {
      layout : 'vertical',
      align : 'right',
      verticalAlign : 'top',
      x : -10,
      y : 100,
      borderWidth : 0
    },
    plotOptions : {
      column : {
        stacking : 'normal',
        dataLabels : {
          enabled : true,
          color : (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
        }
      }
    }
  };
  getChartData(chartOptions);
});

function getChartData(chartOptions) {
  $.getJSON('http://localhost:8080/myservice/2012-03-23', function (data) {
    chartOptions.series = data;
    // Create the chart
    var chart = new Highcharts.Chart(chartOptions);
  });
}
于 2012-04-24T22:42:59.600 に答える