Question

我正在使用最新版本的图表JS（2.5.0），并尝试将2个极地区域图表显示在页面中，该页面的内容包含在VIA ajax中。这是我的两个极坐标图（我将省略其余的代码，因为它与此无关）：

<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'polarArea',
  options: {
     responsive: true
  }
  data: {
    labels: ["Head", "Chest", "Stomach", "Left Arm", "Right Arm", "Left Leg", "Right Leg"],
    datasets: [{
      backgroundColor: [
        "#1AFF05",
        "#0D9900",
        "#197011",
        "#1E4A1A",
        "#4C4D4C",
        "#81917F",
        "#B5F7B0"
      ],
        data: <?php getHitBoxPercents($player);?>
      // data: [12, 19, 3, 17, 28, 24, 7]
    }]
  }
});
</script>

图表2：

<canvas id="myChart1v1"></canvas>
 <script>
    var ctx1v1 = document.getElementById("myChart1v1").getContext('2d');
    var myChart1 = new Chart(ctx1v1, {
        type: 'polarArea',
        options: {
           responsive: true
        }
        data: {
        labels: ["Head", "Chest", "Stomach", "Left Arm", "Right Arm", "Left Leg", "Right Leg"],
        datasets: [{
          backgroundColor: [
            "#1AFF05",
            "#0D9900",
            "#197011",
            "#1E4A1A",
            "#4C4D4C",
            "#81917F",
            "#B5F7B0"
           ],
           data: <?php getHitBoxPercents($player);?>
           // data: [12, 19, 3, 17, 28, 24, 7]
        }]
      }
    });
  </script>

这些都在Tab菜单中，一切正常，但这里有一些奇怪的东西：

第一张图表根本没有正确加载，它会加载＆＃34;大纲＆＃34;图表但没有数据，虽然数据都在javascript中正确设置，如果我拿走第二张图表它就可以正常工作。见图：Puush Image
第二位代码中的图表完美运行：Puush Image 2
如果我按下按钮再次生成ajax（带有搜索按钮的表单以查找匹配的记录）第一个图表完全消失（代码仍然存在），第二个图表仍然可以正常工作。 Puush example of this
也许是整个事情的关键：如果我调整页面大小，图表就会出现，无论我是否在页面中重新加载ajax而图表全部消失，我所要做的就是调整页面大小（转到一半大小然后两个图表，它可以工作。我不知道为什么或如何解决这个问题，但我不希望这是唯一的解决方案。

编辑：我正在尝试根据这个小提琴修复我的但它不起作用：fiddle我尝试使用的新代码：

 $(function(){

  var chart_polar_options = {
    responsive: true
  };

  var data1v1 = {
    labels: ["Head", "Chest", "Stomach", "Left Arm", "Right Arm", "Left Leg", "Right Leg"],
    datasets: [{
      backgroundColor: [
        "#1AFF05",
        "#0D9900",
        "#197011",
        "#1E4A1A",
        "#4C4D4C",
        "#81917F",
        "#B5F7B0"
      ],
        data: <?php getHitBoxPercents($player);?>
    }]
  };



    var ctx1v1 = document.getElementById("myChart1v1").getContext('2d');
    var myChart1 = new Chart(ctx1v1, {
      type: 'polarArea',
      options: {
        responsive: true
      },
      data: data1v1
    });
    $('#tab2').on('shown.bs.tab', function (e) {
      myChart1.destroy();
      myChart1 = new Chart(ctx1v1, {
        type: 'polarArea',
        options: {
          responsive: true
        },
        data: data1v1
      });
    });

    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'polarArea',
      options: {
        responsive: true
      },
      data: data1v1
    });
    $('#tab1').on('shown.bs.tab', function (e) {
      myChart.destroy();
      myChart = new Chart(ctx, {
        type: 'polarArea',
        options: {
          responsive: true
        },
        data: data1v1
      });
    });
});

上面的代码问题既不会加载，直到我调整浏览器的大小，但它会拉入图表，它们看起来只是空白。

ChartJS无法在AJAX中正确显示调用页面

0 个答案: