将序列数据从Java传递到多Y轴Highcharts [英] Passing series data from Java to Multi Y axis Highcharts

问题描述

我刚刚开始学习JQuery和Highcharts.我用静态数据创建了一个多Y轴图表.我希望能够将数据从Java传递到系列数据.我该怎么做?如何使JQuery代码从Java类中获取数据并将其加载到highcharts中.以下是我的代码:

I have just started learning JQuery and Highcharts. I created a multi Y-axis highchart with static data. I wanna be able to pass data from java to the series data. How do i do it? How do i make the JQuery code to fetch data from my java class and load it into the highcharts. The following is my code:

// MultiY.js
$(document).ready(function() {


    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        height: 350,
     },
     title: {
        text: 'Sample Highcharts'
     },
     xAxis: {
        categories: ['4/28/2013', '4/29/2013', '4/30/2013', '5/1/2013', '5/2/2013', '5/3/2013', '5/4/2013']      
     },
     yAxis: [{
         opposite: true,
         title: {
             text: 'Cost',
             style: {
                 color: '#dbf400'
             }             
         },
         labels: {
             style: {
                 color: '#dbf400'
             }
         },plotOptions: {
            series: {
                pointWidth: 20
            }
        }
     },
     {
         lineWidth: 2,
         title: {
             text: 'Silver',
             style: {
                 color: '#89A54E'
             }
         },
         labels: {
             style: {
                 color: '#89A54E'
             }
         }
     }, {
         lineWidth: 2,
         opposite: true,
         title: {
             text: 'Gold',
             style: {
                 color: '#4572A7'
             }
         },
         labels: {
             style: {
                 color: '#4572A7'
             }
         }
     }, {
         lineWidth: 2,
         opposite: true,
         title: {
             text: 'Score',
             style: {
                 color: '#AA4643'
             }
         },
         labels: {
             style: {
                 color: '#AA4643'
             }
         }
     }],

     series: [ {
         name: 'Cost',
         type: 'column',
         color: '#dbf400',
         data: [65078.70, 70816.51, 71211.22, 56130.71, 67839.10, 59170.91, 52826.47] ,
         yAxis: 3
     }, {
         name: 'Silver',
         type: 'spline',
         color: '#89A54E',
         dashStyle: 'shortdot',
         data: [6357434, 7190915, 6737487, 6001323, 8628154, 7446175, 5953040]        
     }, {
         name: 'Gold',
         type: 'spline',
         color: '#4572A7',
         data: [2652304, 2862748, 2645867, 2506507, 2531869, 2352410, 2127584] ,
         yAxis: 1
     }, {
         name: 'Score',
         type: 'spline',
         color: '#AA4643',
         data: [57994, 68114, 64582, 26526, 52712, 55464, 46802] ,
         yAxis: 2
     }]
    });

});

我的Java函数返回:

My Java function returns:

trendingData.add(new TrendingDataObjects(silver, gold, score, cost, day));

推荐答案

这对我有用:在document.ready()....之后，进行ajax调用，并将图表创建功能放入成功函数中.这样，图表将在初始化时加载数据.例子: //DOM(文档)加载完成后 $(document).ready(function(){

This worked for me: After the document.ready() .... make the ajax call and put the chart creation functionality within the success function. That way the chart would load with the data while initiation. Example: // Once DOM (document) is finished loading $(document).ready(function() {

$.ajax({
    type: "GET",
    url: "url",
    dataType: 'json',
    success: function(data){


        var timeArray = data.time;
        var costArray = data.cost;


     // First chart initialization
        chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'chart_1',
            height: 350,
         },
         title: {
            text: 'Ozone Trending'
         },
         xAxis: {
           categories: timeArray,
           labels: {
               rotation: -45,
               align: 'right'
           }
         },
         yAxis: [{
             opposite: true,
             title: {
                 text: 'Cost'

             },
             labels: {
                 style: {
                     color: '#dbf400'
                 }
             },plotOptions: {
                series: {
                    pointWidth: 20
                }
            }
         }],

         series: [ {
             name: 'Cost',
             data: costArray,

         }]
        });


    }

});

});

这篇关于将序列数据从Java传递到多Y轴Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！