Question

我尝试使用node.js，socket.io和highcharts.js创建实时仪表板。

我在客户端运行了highcharts，当socket.io收到更新时，图表应该会改变。

这是我的客户端代码，

<html>
<head>
<title>
Admin Events Page
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>

<h2><center> Events Panel </h2></center>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="panel1">
<h4>
    Total Ticket Count:<h3 id='c1'></h3>
</h4> 
<h4>
    Total Sales Amount: <h3 id='sales'></h3>
</h4>
</div>

<div id='panel2'>
<h2>Event 1</h2>
<h4>Total Tickets for Event 1: <h4 id="e1t"></h4> </h4>
<h4>Total Amount for Event 1:  <h4 id="e1s"></h4> </h4>
</div>

<div id='panel3'>
<h2>Event 2</h2>
<h4>Total Tickets for Event 2: <h4 id="e2t"></h4></h4>
<h4>Total Amount for Event 2:  <h4 id="e2s"></h4></h4>
</div>

</body>

<script src="highcharts.js"></script>
<script src="exporting.js">
</script>
<script src="/socket.io/socket.io.js"></script>

<script>


$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Event 1', 'Event 2']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        }
                    }
                }
            },
            series: [{
                name: 'Sold',
                data: [2, 2]
            }, {
                name: 'Available',
                data: [3, 4]
            }]
        });
    });


var socket=io();
var sales=0;
var e1tcount=0;
var e1scount=0;
var e2tcount=0;
var e2scount=0;
socket.on('response', function(arr){
    $('#c1').html(arr[0]);
    sales+=arr[2];
    $('#sales').html(sales);

    if(arr[1]=="CT")
    {
        e1tcount++; 
        $('#e1t').html(e1tcount);
        e1scount+=arr[2];
        $('#e1s').html(e1scount);
    }
    if(arr[1]=="AB")
    {
        e2tcount++;
        $('#e2t').html(e2tcount);
        e2scount+=arr[2];
        $('#e2s').html(e2scount);
    }
});
</script>
</html>

我还没有添加套接字变量和高图值之间的交互。我的问题是，柱形图根本不显示。当我尝试使用http：127.0.0.1：3000 / admine

访问它时，它只是一个空白区域

但是当我打开html文件时，图表会完美显示。

可能是什么问题？

这是我的服务器端代码，

app.get('/admine', function (req, res) {
res.sendfile('adminevents.html');
});

//Processing POST request
app.post('/', function (req, res) {
count = count + 1;
var body = "";
req.on('data', function (data) {
    body += data;
});
req.on('end', function () {
    //console.log(body);  //Recieved data from POST

    /* Parsing the XML data into JSON*/
    var xml = body;
    var parsed = "";
    parseString(xml, function (err, result) { //Parsing XML
    //

    //console.log(JSON.stringify(result));
    var temp1=Number(result.BookMyShow.Summaries[0].Summary[0].$.Trans_mnyTicketsTotal);
    console.log(temp1);
    var etype=JSON.stringify(result.BookMyShow.Summaries[0].Summary[0].$.Event_strType);
    var summary=JSON.parse(temp1);


    var temp2=JSON.stringify(result.BookMyShow.SessionOrders[0].SessionOrder[0].$);
    var sessionorder=JSON.parse(temp2);

    var temp3=JSON.stringify(result.BookMyShow.Inventories[0].Inventory[0].$);
    var inventory=JSON.parse(temp3);

    var temp4=JSON.stringify(result.BookMyShow.SeatInfos[0].SeatInfo[0].$);
    var seatinfo=JSON.parse(temp4);

    var arr=[count,JSON.parse(etype),temp1,"Hello"];
    console.log(arr);
    io.emit('response', arr);

没有显示Highchart.js图表（Node.js）

0 个答案:

没有显示Highchart.js图表​​（Node.js）

0 个答案:

没有显示Highchart.js图表（Node.js）