如何在循环中使用highcharts创建多个图表?

时间:2016-01-22 03:08:08

标签: javascript php html highmaps

这是我的相关代码:

        <script>
            titles = <?php echo json_encode($graphTitles)?>;
            //Loop through the graphs
            for (var graphNO = 0; graphNO < titles.length; graphNO++)
            {                               
               //CREATE NEW CONTAINER
                var container = document.createElement('div'); 
                document.body.appendChild(container);er);

                dates = <?php echo json_encode($recivedDates);?>[titles[graphNO]];
                //I EXTRACT A FEW  MORE ARRAYS THE SAME METHOD
              $(function () 
                {
                  $(container).highcharts({
                      title: {
                          text: titles[graphNO]
                      },
                      xAxis: {
                          categories: dates
                      },
                      series: [{
                          type: 'column',
                          color: 'gold',
                          name: 'Created Issues',
                          data: createdIssues.map(Number)
                      }, 
                       //MORE COLUMN'S AND SOME SPLINES. IT ALL WORKS AS EXPECTED
                  });
                });
            }
        </script>

我不想发布所有代码而只是让它变得混乱,我期望这段代码的作用是:

graphNO的值为2,我认为它会循环两次(它会这样做),为每个循环创建一个容器(它会这样做),然后为它在容器中的每个循环绘制一个不同的图形制作(但它只绘制第二张图)。

我不知道什么是错的,但是关于如何解决这个问题的任何想法,或者关于如何在循环中制作多个图形的任何想法都会有很大的帮助。

此外,这是我正在制作的第一个网站,所以我没有使用javascript,php或html超过一天,所以很抱歉,如果真的很明显,我找不到任何关于此的内容。< / p>

2 个答案:

答案 0 :(得分:2)

我明白了,经过一天从网络上尝试复杂的东西后,我不知道如果我删除了这个函数,那么我会想到会发生什么:

             $(function () 
            {
              $(container).highcharts({
                  title: {

我只是:

              $(container).highcharts({
                  title: {

这一切都很完美。我不知道为什么,可能是因为jquery如何处理函数,我不知道,直到一小时前我甚至不知道我使用的是jquery。但是,如果有人想要做类似的事情,它有效,并随时告诉我原因,它就有效。

答案 1 :(得分:1)

Swikrit Khanal的答案确实有效,因为该功能不再被覆盖。当你把它全部包含在函数中时,该函数会在构建下一个图时覆盖它的自我,所以你只剩下最后一个图。

Bellow是一种使用循环并在不删除函数的情况下构建多个图形的方法,而是唯一地命名它。

for(v=0; v < 5; v++){
 var container = "#container"+v;
 var func_name = "container"+v;
 func_name = function () {
   $(container).highcharts({
   })
 }
func_name()
}