为什么这个CanvasJS脚本不能动态更改变量？

时间：2014-09-12 01:15:11

标签： javascript canvasjs

尝试让这个脚本每隔一秒用随机变量重新加载。我得到的只是第一组数据，chart.render似乎只在它没有嵌套在函数中时起作用。它的功能是工作＆＃39;这似乎被打破了。我尝试了用于折线图的canvasjs解决方案，它也不起作用。有什么想法吗？

    <!DOCTYPE HTML>
<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF8">
<script type="text/javascript" src="canvasjs.min.js"></script>

<script type="text/javascript">  
  var f86,f810,f814,f816,d96,d910,d914,d916,d86,d810,d814,d816,c46,c410,c414,c416;
                f86 = Math.floor(Math.random() * 10) + 80 +1;
                f810 = Math.floor(Math.random() * 10) + 80 +1;
                f814 = Math.floor(Math.random() * 10) + 80 +1;
                f818 = Math.floor(Math.random() * 10) + 80 +1;
                d96 = Math.floor(Math.random() * 10) + 80 +1;;
                d910 = Math.floor(Math.random() * 10) + 80 +1;
                d914 = Math.floor(Math.random() * 10) + 80 +1;
                d918 = Math.floor(Math.random() * 10) + 80 +1;  
                d86 = Math.floor(Math.random() * 10) + 80 +1;
                d810 = Math.floor(Math.random() * 10) + 80 +1;
                d814 = Math.floor(Math.random() * 10) + 80 +1;
                d818 = Math.floor(Math.random() * 10) + 80 +1; 
                c46 = Math.floor(Math.random() * 10) + 80 +1;
                c410 = Math.floor(Math.random() * 10) + 80 +1;
                c414 = Math.floor(Math.random() * 10) + 80 +1;
                c418 = Math.floor(Math.random() * 10) + 80 +1;

    window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      axisX:{tickThickness: 1,lineThickness: 1},
      toolTip:{enabled: false},
      axisY: {includeZero: false,suffix: "C",minimum: 0,maximum: 123,tickThickness: 1,lineThickness: 1,gridThickness: 1},
      data:[
      {
        type: "bar",indexLabel: "{y} C ",showInLegend: true,name: "6'",color: "#8080E6",indexLabelPlacement: "inside",indexLabelFontColor: "white",
        dataPoints: [{ y: c46, label: "C4"},{ y: d86, label: "D8"},{ y: d96, label: "D9"},{ y: f86, label: "F8"}]
      },
      {  
        type: "bar",indexLabel: "{y} C ",showInLegend: true,name: "10'",color: "#3333D6",indexLabelPlacement: "inside",indexLabelFontColor: "white",        
        dataPoints: [{ y: c410, label: "C4"},{ y: d810, label: "D8"},{ y: d910, label: "D9"},{ y: f810, label: "F8"}]
      },
      {
        type: "bar",indexLabel: "{y} C ",showInLegend: true,name: "14'",color: "#0000B8",indexLabelPlacement: "inside",indexLabelFontColor: "white",
        dataPoints: [{ y: c414, label: "C4"},{ y: d814, label: "D8"},{ y: d914, label: "D9"},{ y: f814, label: "F8"}]
      },
      {  
        type: "bar",indexLabel: "{y} C ",showInLegend: true,name: "18'",color: "#000066",indexLabelPlacement: "inside",indexLabelFontColor: "white",
        dataPoints: [{ y: c418, label: "C4"},{ y: d818, label: "D8"},{ y: d918, label: "D9"},{ y: f818, label: "F8"}]
      }
      ]
    });

    chart.render(); 

}
  function work() {
                f86++;
                f810 = Math.floor(Math.random() * 10) + 80 +1;
                f814 = Math.floor(Math.random() * 10) + 80 +1;
                f818 = Math.floor(Math.random() * 10) + 80 +1;
                d96 = Math.floor(Math.random() * 10) + 80 +1;;
                d910 = Math.floor(Math.random() * 10) + 80 +1;
                d914 = Math.floor(Math.random() * 10) + 80 +1;
                d918 = Math.floor(Math.random() * 10) + 80 +1;  
                d86 = Math.floor(Math.random() * 10) + 80 +1;
                d810 = Math.floor(Math.random() * 10) + 80 +1;
                d814 = Math.floor(Math.random() * 10) + 80 +1;
                d818 = Math.floor(Math.random() * 10) + 80 +1; 
                c46 = Math.floor(Math.random() * 10) + 80 +1;
                c410 = Math.floor(Math.random() * 10) + 80 +1;
                c414 = Math.floor(Math.random() * 10) + 80 +1;
                c418 = Math.floor(Math.random() * 10) + 80 +1;
                chart.render(); 
          setTimeout('work()', 100);
          }
          work();
</script>


</head>

<body><br>

  <div style="width: 850px; overflow: auto; padding: 1em; margin: auto; float:center">
   <div id="chartContainer" style="height: 400px; width: 500px; float:left"></div>


  </div>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

我对CanvasJs了解不多我在阅读完你的问题之后才参加了巡演，但似乎要重新绘制图表，你需要每次都创建一个新实例（如果我错了请纠正我，如同我可能不太了解情况。）

无论如何，我通过将window.onload中的代码输出到我调用drawChart的函数并在函数work中重用它来获得一些结果，现在代码看起来像这样

<强> I made a jsfiddle here 

(function () {
    'use strict';

    var f86, f810, f814, f816, f818, d96, d910, d914, d916, d918, d86, d810, d814, d816, d818, c46, c410, c414, c416, c418;

    f86 = Math.floor(Math.random() * 10) + 80 + 1;
    f810 = Math.floor(Math.random() * 10) + 80 + 1;
    f814 = Math.floor(Math.random() * 10) + 80 + 1;
    f818 = Math.floor(Math.random() * 10) + 80 + 1;
    d96 = Math.floor(Math.random() * 10) + 80 + 1;;
    d910 = Math.floor(Math.random() * 10) + 80 + 1;
    d914 = Math.floor(Math.random() * 10) + 80 + 1;
    d918 = Math.floor(Math.random() * 10) + 80 + 1;
    d86 = Math.floor(Math.random() * 10) + 80 + 1;
    d810 = Math.floor(Math.random() * 10) + 80 + 1;
    d814 = Math.floor(Math.random() * 10) + 80 + 1;
    d818 = Math.floor(Math.random() * 10) + 80 + 1;
    c46 = Math.floor(Math.random() * 10) + 80 + 1;
    c410 = Math.floor(Math.random() * 10) + 80 + 1;
    c414 = Math.floor(Math.random() * 10) + 80 + 1;
    c418 = Math.floor(Math.random() * 10) + 80 + 1;

    window.onload = function () {
        drawChart();
    }

    function work() {
        f86++;
        f810 = Math.floor(Math.random() * 10) + 80 + 1;
        f814 = Math.floor(Math.random() * 10) + 80 + 1;
        f818 = Math.floor(Math.random() * 10) + 80 + 1;
        d96 = Math.floor(Math.random() * 10) + 80 + 1;;
        d910 = Math.floor(Math.random() * 10) + 80 + 1;
        d914 = Math.floor(Math.random() * 10) + 80 + 1;
        d918 = Math.floor(Math.random() * 10) + 80 + 1;
        d86 = Math.floor(Math.random() * 10) + 80 + 1;
        d810 = Math.floor(Math.random() * 10) + 80 + 1;
        d814 = Math.floor(Math.random() * 10) + 80 + 1;
        d818 = Math.floor(Math.random() * 10) + 80 + 1;
        c46 = Math.floor(Math.random() * 10) + 80 + 1;
        c410 = Math.floor(Math.random() * 10) + 80 + 1;
        c414 = Math.floor(Math.random() * 10) + 80 + 1;
        c418 = Math.floor(Math.random() * 10) + 80 + 1;
        drawChart();
        setTimeout(work, 100);
    }

    function drawChart() {
        var chart = new CanvasJS.Chart("chartContainer", {
            axisX: {
                tickThickness: 1,
                lineThickness: 1
            },
            toolTip: {
                enabled: false
            },
            axisY: {
                includeZero: false,
                suffix: "C",
                minimum: 0,
                maximum: 123,
                tickThickness: 1,
                lineThickness: 1,
                gridThickness: 1
            },
            data: [{
                type: "bar",
                indexLabel: "{y} C ",
                showInLegend: true,
                name: "6'",
                color: "#8080E6",
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                dataPoints: [{
                    y: c46,
                    label: "C4"
                }, {
                    y: d86,
                    label: "D8"
                }, {
                    y: d96,
                    label: "D9"
                }, {
                    y: f86,
                    label: "F8"
                }]
            }, {
                type: "bar",
                indexLabel: "{y} C ",
                showInLegend: true,
                name: "10'",
                color: "#3333D6",
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                dataPoints: [{
                    y: c410,
                    label: "C4"
                }, {
                    y: d810,
                    label: "D8"
                }, {
                    y: d910,
                    label: "D9"
                }, {
                    y: f810,
                    label: "F8"
                }]
            }, {
                type: "bar",
                indexLabel: "{y} C ",
                showInLegend: true,
                name: "14'",
                color: "#0000B8",
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                dataPoints: [{
                    y: c414,
                    label: "C4"
                }, {
                    y: d814,
                    label: "D8"
                }, {
                    y: d914,
                    label: "D9"
                }, {
                    y: f814,
                    label: "F8"
                }]
            }, {
                type: "bar",
                indexLabel: "{y} C ",
                showInLegend: true,
                name: "18'",
                color: "#000066",
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                dataPoints: [{
                    y: c418,
                    label: "C4"
                }, {
                    y: d818,
                    label: "D8"
                }, {
                    y: d918,
                    label: "D9"
                }, {
                    y: f818,
                    label: "F8"
                }]
            }]
        });

        chart.render();
    }
    work();

}());

作为旁注

让这么多全局游戏徘徊，即使这些是数字也是一种不好的做法，这就是为什么我把它全部包裹在IIFE中。通过在一个地方重构数字赋值，仍然有一些改进，但这不属于这个问题的范围。

相关问题
最新问题