使用pusher和canvas js的實時圖表

Question

<script type="text/javascript">
window.onload = function () {
    // initial values of dataPoints
    var dps = [
    {label: "Management Wing", y: 125}  ,
    {label: "Production Lab", y: 332},
    {label: "Cafeteria", y: 55},
    {label: "Library", y: 46},
    {label: "Recreation Centre", y: 32}
    ];
    var totalEmployees = "total people on campus: 590";

    var chart = new CanvasJS.Chart("chartContainer",{
        theme: "theme2",
        title:{ 
            text: "People On Campus"
        },
        axisY: {                
            title: "Number of People"
        },                  
        legend:{
            verticalAlign: "top",
            horizontalAlign: "centre",
            fontSize: 18

        },
        data : [{
            type: "column",
            showInLegend: true,
            legendMarkerType: "none",               
            legendText: totalEmployees,
            indexLabel: "{y}",
            dataPoints: dps
        }]
    });

    // renders initial chart
    chart.render();

    var sum = 590;   //initial sum 

    var updateInterval = 1000;  // milliseconds

    var updateChart = function () {
        // Selecting a random dataPoint
        var dataPointIndex = Math.round(Math.random()*4);       

        // generating random value
        var deltaY = Math.round(2 + Math.random() *(-2-2)); 

        // adding random value to random dataPoint
        dps[dataPointIndex].y = (dps[dataPointIndex].y + deltaY) > 0 ? dps[dataPointIndex].y + deltaY : 0 ;

        // updating legend text. 
        sum = sum + deltaY;
        totalEmployees = "total people on campus: " + sum;          
        chart.options.data[0].legendText = totalEmployees;  

        chart.render();

    };
        // update chart after specified interval
        setInterval(function(){updateChart()}, updateInterval);

    }   
    </script>

    <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>

嗨，我正在使用canvasjs.com 。 在上面的代碼中，我如何訪問label的值。 我將y的值作為JSON.stringify(dps[0].name) - 它返回Management Wing 125值。 但我需要實現像management wing ， production lab這樣的標簽。這樣我就可以跟蹤推送事件觸發時應該更新哪個標簽。

Answer 1

你必須使用ajax。 在updateChart上插入一個ajax，看看這里

// global variable label n y
var labelJSON = [];
var yJSON = [];

var updateChart = function () {

    $.getJSON("http://www.domain.com/data/json", function(json){
        for(var i=0; i<json.length; i++) {
            labelJSON[i] = json[i].label
            yJSON[i] = json[i].y;
        }
    });

    for (var i = 0; i < dps.length; i++) {
        // update chart here
        dps[i] = {label: labelJSON[i] , y: yJSON[i]};           
    };

    chart.render();
};

http：//www.domain.com/data/json的URL提供的輸出就像你在var dps上的數據一樣。

並且不要忘記在canvasjs.min.js上加載jquery庫。 所以看起來像這里

<script type="text/javascript" src="/assets/script/jquery.min.js"></script
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>

我希望它有用