无法在highcharts上显示json数据

时间:2014-08-10 12:49:54

标签: javascript highcharts

我正在尝试在我的页面上构建一个高图。我确实得到了图表框架和标题,但现在是行或图例。当我这样做时:

document.write(output)

[ {"name":"dc1_sx02","data":[[1406269800,0.092],[1406271600,0.092],[1406273400,0.091],[1406275200,0.093],[1406277000,0.091],[1406278800,0.09],[1406280600,0.093],[1406282400,0.094],[1406284200,0.092],[1406286000,0.09],[1406287800,0.094]]},{"name":"dc1_sx03","data":[[1406340000,0.01],[1406341800,0.009],[1406343600,0.009],[1406345400,0.009],[1406347200,0.009],[1406349000,0.009],[1406350800,0.009],[1406352600,0.009],[1406356200,0.01],[1406358000,0.009],[1406359800,0.009],[1406361600,0.009],[1406365200,0.009],[1406367000,0.009],[1406368800,0.009],[1406370600,0.009],[1406374200,0.009],[1406376000,0.009],[1406377800,0.01],[1406379600,0.009],[1406383200,0.009],[1406385000,0.009],[1406386800,0.009],[1406388600,0.009],[1406392200,0.009],[1406394000,0.009],[1406475000,0.009],[1406476800,0.009],[1406478600,0.009],[1406480400,0.009],[1406482200,0.009],[1406484000,0.009],[1406485800,0.009],[1406487600,0.009],[1406489400,0.009],[1406491200,0.011],[1406493000,0.01],[1406494800,0.009],[1406496600,0.009],[1406498400,0.009],[1406500200,0.01],[1406502000,0.009],[1406503800,0.009],[1406505600,0.009],[1406507400,0.009],[1406509200,0.009],[1406511000,0.009],[1406512800,0.009],[1406514600,0.009],[1406516400,0.009],[1406518200,0.009],[1406520000,0.009],[1406521800,0.009],[1406523600,0.009],[1406525400,0.009],[1406527200,0.009],[1406529000,0.01],[1406530800,0.009],[1406532600,0.009],[1406534400,0.009],[1406536200,0.009],[1406538000,0.009],[1406539800,0.009],[1406541600,0.009],[1406543400,0.009],[1406547000,0.009],[1406548800,0.009],[1406550600,0.009],[1406552400,0.009],[1406554200,0.009],[1406556000,0.009],[1406557800,0.009],[1406559600,0.009],[1406561400,0.009],[1406563200,0.009],[1406565000,0.009],[1406566800,0.009],[1406568600,0.009],[1406570400,0.009],[1406572200,0.009],[1406574000,0.009],[1406575800,0.009],[1406577600,0.009],[1406579400,0.009],[1406581200,0.009],[1406583000,0.009],[1406584800,0.009],[1406586600,0.009],[1406588400,0.009],[1406590200,0.009],[1406592000,0.009],[1406593800,0.009],[1406595600,0.009],[1406597400,0.009],[1406599200,0.009],[1406601000,0.009],[1406602800,0.009],[1406604600,0.01],[1406606400,0.009],[1406608200,0.009],[1406610000,0.009],[1406611800,0.009],[1406613600,0.009],[1406615400,0.01],[1406617200,0.011],[1406619000,0.012],[1406620800,0.012],[1406622600,0.012],[1406624400,0.012],[1406626200,0.012],[1406628000,0.012],[1406629800,0.012],[1406631600,0.012],[1406633400,0.012],[1406635200,0.012],[1406637000,0.011],[1406638800,0.012],[1406640600,0.012],[1406642400,0.012],[1406644200,0.012],[1406646000,0.012],[1406647800,0.013],[1406649600,0.012],[1406651400,0.012],[1406653200,0.012],[1406655000,0.012]]} ] 

我确实得到了很好的格式化json输出。任何想法我可能会从这个脚本中遗漏:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>

    <!-- Include order: first jquery, then opencpu.js, and then your code -->
    <script src="opencpu/jquery-1.10.2.min.js"></script>
    <script src="opencpu/opencpu-0.4.js"></script>
    <script src="opencpu/highcharts.js"></script>
    <script src="opencpu/export-csv.js"></script>

    <script>
    //init this script when the page has loaded
    $(document).ready(function(){
      $("#submitbutton").on("click", function(){
        //disable the button to prevent multiple clicks
        $("#submitbutton").attr("disabled", "disabled");

        var myname = $("#namefield").val();
        //perform the request
        var req = ocpu.rpc("output", {
          myname : myname

        }, function(output){
          document.write(output);
          //alert(output);
        $('#output').highcharts({
        //$("#output").highcharts('StockChart',{
        chart: {
            borderColor: '#98AFC7',
                borderRadius: 20,
                borderWidth: 1,
                renderTo: 'output',
                type: 'line',
                marginRight: 10,
                zoomType: 'x',
                resetZoomButton: {
                position: {

                    x: -50,
                    y: -50
                    }
                }
            },
            plotOptions: {
                line: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 5
                    }
                }
            },

            exporting: {
            enabled: true
        },
           legend: {
            enabled: true,
            backgroundColor: '#FCFFC5',
            borderColor: 'black',
            borderWidth: 2,
            shadow: true
        },
            rangeSelector: {
                enabled:true               
            },

            scrollbar: {
                    enabled: true
                    },
            navigator : {
                enabled : true
            },
            xAxis: {
        type:'datetime',
                gridLineColor: '#EEEEEE',
                gridLineWidth: 1
            },
            yAxis: { // Primary yAxis
                labels: {

                    style: {
                        color: 'blue'
                    }
                },
                gridLineColor: '#EEEEEE',
                gridLineWidth: 1,

                title: {
                    text: '% CPU Utilization',
                    fontSize: '50px',
                    style: {
                        color: 'blue'
                    }
                }
            },

            credits: {
                enabled: false
            },

            title: {
                text: '% CPU UTILIZATION',
                style: {
                    color: '#333000',
                    fontSize: '14px'
                }
            },


            tooltip: {
            positioner: function(){
                    return{x:20,y:-5};
                },
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}<b>',
                valueDecimals: 2
            },

            series:output

    });
});

        //if R returns an error, alert the error message
        req.fail(function(){
          alert("Server error: " + req.responseText);
        });

        //after request complete, re-enable the button 
        req.always(function(){
          $("#submitbutton").removeAttr("disabled")
        });
      });
    });
    </script>

    <style>
      #output{
        height: 600px;
        width: 1500px;
        border: 0px;
        padding: 3px;
      }
    </style>

  </head>

  <body>
    <h1>My First HighStock Chart!!!!</h1>

    <b>Your name: </b> <input type="text" id="namefield">

    <button id="submitbutton" type="button">Submit to server!</button>

    <div id="output"> </div>

    <br />


  </body>
</html>

我做了

document.write(output)

并将输出复制到此地址的jsfiddle:

http://jsfiddle.net/gsaray101/rmL1573f/

它在那里工作所以我假设数据是准确的,任何想法可能会发生什么?

1 个答案:

答案 0 :(得分:0)

我通过在ui中使用JSON.parse()函数解决了这个问题,如下所示:

var data=output;
data=JSON.parse(data);