dongni8969 2017-05-24 18:08
浏览 75

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

I am using the latest version of chart JS (2.5.0) and trying to get 2 polar area charts to appear in a page that has the content of the page loaded in VIA ajax. Here are my two polar charts (I will omit the rest of the code as it is not pertinent to this):

<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>

And Chart 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>

These are both in Tab menus which all works fine but here are the weird things:

  • The first chart doesn't load properly at all, it loads the "outline" of the chart but no data, although the data is all set properly in the javascript and it works just fine if I take away the second chart. See picture: Puush Image
  • The chart from the second bit of code works perfectly: Puush Image 2
  • If I press the button to generate the ajax again (a form with a search button to find matching records) The first chart goes away completely (code is all still there) and the second chart still works just fine. Puush example of this
  • Maybe the key to this whole thing: If I resize the page the chart appears, regardless of if I reload the ajax in the page and the chart all disappears all I have to do is resize the page (go to half size then maximize again) and it works, both charts. I don't know why or how to fix this but I don't want that to be the only solution.

EDIT: I am trying to fix mine according to this fiddle but it isn't working: fiddle The new code I am trying to use:

 $(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
      });
    });
});

The problem with the code above is neither load until I resize the browser but it is pulling in the charts, they just look blank.

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥17 pro*C预编译“闪回查询”报错SCN不能识别
    • ¥15 微信会员卡接入微信支付商户号收款
    • ¥15 如何获取烟草零售终端数据
    • ¥15 数学建模招标中位数问题
    • ¥15 phython路径名过长报错 不知道什么问题
    • ¥15 深度学习中模型转换该怎么实现
    • ¥15 HLs设计手写数字识别程序编译通不过
    • ¥15 Stata外部命令安装问题求帮助!
    • ¥15 从键盘随机输入A-H中的一串字符串,用七段数码管方法进行绘制。提交代码及运行截图。
    • ¥15 TYPCE母转母,插入认方向