谷歌图表长Javascript问题

时间:2017-05-31 06:31:41

标签: javascript charts google-visualization

.Hi我一直在尝试将google calendar chart添加到我的项目中,但有些错误我不明白。

我的图表位于弹出式面板上,按下按钮触发,这是我的代码;

按钮点击功能:

function Detail(id)
{
   google.charts.load("current", { packages: ["calendar"] });
   google.charts.setOnLoadCallback(drawChart);  //callback for chart
   $.ajax({
        //Some stuff here
   });

   $.ajax({
       //Some other stuff here
   });
}

因此,正如您在按钮后看到的那样,必须运行drawChart。

function drawChart(){
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'date', id: 'Date' });
  dataTable.addColumn({ type: 'number', id: 'done/miss' });
  dataTable.addColumn({ type: 'string', role: 'tooltip', p: { html: true } });

  dataTable.addRows([
                    [new Date(2017, 3, 9), 10, '<div style="width:40px; height:40px;">TESTtest</div>']
        ]);
  var chart = new google.visualization.Calendar(document.getElementById('calendar'));

   var options = {
            title: "test",
            height: '100%',
        };
   chart.draw(dataTable, options);
   $('#PopUpDiv').show();
}

当我点击按钮页锁几秒钟时,Firefox说:“脚本停止工作或者不再响应脚本:https://www.gstatic.com/charts ... sapi_compiled_format_module.js:179

代码看起来非常简单和正确。我不明白发生了什么,所以一些帮助会很棒。提前谢谢。

编辑:我已创建代码剪切并在那里尝试此代码并且它可以正常工作。现在我很困惑:(

function Detail()
{
google.charts.load("current", { packages: ["calendar"] });
   google.charts.setOnLoadCallback(drawChart);  
}

function drawChart(){
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'date', id: 'Date' });
  dataTable.addColumn({ type: 'number', id: 'done/miss' });
  dataTable.addColumn({ type: 'string', role: 'tooltip', p: { html: true } });

  dataTable.addRows([
                    [new Date(2017, 3, 9), 10, '<div style="width:40px; height:40px;">TESTtest</div>']
        ]);
  var chart = new google.visualization.Calendar(document.getElementById('calendar'));

   var options = {
            title: "test",
            height: '100%',
        };
   chart.draw(dataTable, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<button type="button" onclick="Detail()">click it</button>
<div id="calendar"></div>

1 个答案:

答案 0 :(得分:0)

我关闭了VS并重新启动了项目,并以某种方式解决了问题。所以代码很好。感谢大家的关注。