Question

我有一个条形图，我想获取当天的活动并将其显示在图表中。这适用于作为参数发送到下面的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);
  });   
}

Answer 1

如果从表单提交发送了两个参数，您可以获取这些参数并使用getChartData网址中的值，如：

 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]);

Answer 2

试试这个：

$(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);
  });
}

将html文本框中的输入添加到highcharts图中

2 个答案: