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)访问 - 它返回125 Management Wing的值。但是我需要实现像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 的网址就像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>

我希望它有用

使用pusher和canvas js的实时图表

1 个答案: