jQuery 多个选项卡上的 canvasjs 图表显示不正确

Question

在 jQuery 多个选项卡上显示 canvasjs.com 图表不正确，但是当我使用宽度 att 问题已解决，但图表没有响应！

$('[data-tab]').on('click', function (e) {
  $(this)
  .addClass('active')
  .siblings('[data-tab]')
  .removeClass('active')
  .siblings('[data-content=' + $(this).data('tab') + ']')
  .addClass('active')
  .siblings('[data-content]')
  .removeClass('active');
  e.preventDefault();
});
var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "line",
    fontFamily: "tahoma",
    fontSize: 15
  },
  animationEnabled: true,
  axisX: {
    gridColor: "Silver",
    tickColor: "silver",
    interval: 1,
    labelAngle: -70

  },
  toolTip: {
    shared: true,
    fontStyle: "normal",
    fontFamily: "tahoma"
  },
  theme: "theme2",
  axisY: {
    gridColor: "Silver",
    tickColor: "silver"

  },
  data: [{
    type: "area",
    showInLegend: true,
    lineThickness: 2,
    name: "stats",
    markerType: "square",
    color: "#F08080",
    dataPoints: [{
      x: new Date(2010, 0, 3),
      y: 650
    }, {
      x: new Date(2010, 0, 5),
      y: 700
    }, {
      x: new Date(2010, 0, 7),
      y: 710
    }, {
      x: new Date(2010, 0, 9),
      y: 658
    }, {
      x: new Date(2010, 0, 11),
      y: 734
    }, {
      x: new Date(2010, 0, 13),
      y: 963
    }, {
      x: new Date(2010, 0, 15),
      y: 847
    }, {
      x: new Date(2010, 0, 17),
      y: 853
    }, {
      x: new Date(2010, 0, 19),
      y: 869
    }, {
      x: new Date(2010, 0, 21),
      y: 943
    }, {
      x: new Date(2010, 0, 23),
      y: 970
    }]

  }, {
    type: "area",
    showInLegend: true,
    name: "hits",
    color: "#20B2AA",
    lineThickness: 2,
    dataPoints: [{
      x: new Date(2010, 0, 3),
      y: 510
    }, {
      x: new Date(2010, 0, 5),
      y: 560
    }, {
      x: new Date(2010, 0, 7),
      y: 540
    }, {
      x: new Date(2010, 0, 9),
      y: 558
    }, {
      x: new Date(2010, 0, 11),
      y: 544
    }, {
      x: new Date(2010, 0, 13),
      y: 693
    }, {
      x: new Date(2010, 0, 15),
      y: 657
    }, {
      x: new Date(2010, 0, 17),
      y: 663
    }, {
      x: new Date(2010, 0, 19),
      y: 639
    }, {
      x: new Date(2010, 0, 21),
      y: 673
    }, {
      x: new Date(2010, 0, 23),
      y: 660
    }]
  }],
  legend: {
    cursor: "pointer",
    verticalAlign: "bottom",
    horizontalAlign: "center",
    fontFamily: "tahoma",
    itemclick: function (e) {
      if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.dataSeries.visible = false;
      } else {
        e.dataSeries.visible = true;
      }
      chart.render();
    }
  }
});

chart.render();

var piechart1 = new CanvasJS.Chart("piechart1", {
  title: {
    text: "Top Categoires of New Year's Resolution"
  },
  exportFileName: "Pie Chart",
  exportEnabled: true,
  animationEnabled: true,
  legend: {
    verticalAlign: "bottom",
    horizontalAlign: "center"
  },
  data: [{
    type: "pie",
    showInLegend: true,
    toolTipContent: "{legendText}: <strong>{y}%</strong>",
    indexLabel: "{label} {y}%",
    dataPoints: [{
      y: 35,
      legendText: "Health",
      exploded: true,
      label: "Health"
    }, {
      y: 20,
      legendText: "Finance",
      label: "Finance"
    }, {
      y: 18,
      legendText: "Career",
      label: "Career"
    }, {
      y: 15,
      legendText: "Education",
      label: "Education"
    }, {
      y: 5,
      legendText: "Family",
      label: "Family"
    }, {
      y: 7,
      legendText: "Real Estate",
      label: "Real Estate"
    }]
  }]
});
piechart1.render();

var chart2 = new CanvasJS.Chart("chart2", {
  title: {
    text: "Top "
  },
  exportFileName: "Pie Chart",
  exportEnabled: true,
  animationEnabled: true,
  legend: {
    verticalAlign: "bottom",
    horizontalAlign: "center"
  },
  data: [{
    type: "pie",
    showInLegend: true,
    toolTipContent: "{legendText}: <strong>{y}%</strong>",
    indexLabel: "{label} {y}%",
    dataPoints: [{
      y: 35,
      legendText: "Health",
      exploded: true,
      label: "Health"
    }, {
      y: 20,
      legendText: "Finance",
      label: "Finance"
    }, {
      y: 18,
      legendText: "Career",
      label: "Career"
    }, {
      y: 15,
      legendText: "Education",
      label: "Education"
    }, {
      y: 5,
      legendText: "Family",
      label: "Family"
    }, {
      y: 7,
      legendText: "Real Estate",
      label: "Real Estate"
    }]
  }]
});
chart2.render();

.tab {
    text-decoration:none;
    border-radius: 4px 4px 0 0;
    font-family: tahoma;
    font-size: 9pt;
    cursor: pointer;
    display: inline;
    margin: 10px 1px 1px 4px;
    float: right;
    padding: 5px 9px;
    background: #E4E4E4;
    border: 1px solid #CCC;
    z-index: 1;
    white-space: nowrap;
    position: relative;
    top: 1px;
    text-shadow: 0 1px 0 white;
}
.tabs a {
    text-decoration:none;
    color:#555555!important;
    text-shadow: 0 1px 0 white;
}
.tab.active {
    background: #FFF;
    border-radius: 4px 4px 0 0;
    border: 1px solid #B9B9B9;
    border-bottom: 0px;
    z-index: 3;
    padding: 5px 9px;
    margin: 10px 0px 0px 4px;
    top: 1px;
}
.tab.active:hover {
    background: #fff;
    color:#222;
    text-decoration:none;
}
.tab:hover {
    background: #F2F2F2;
    color:#222;
    text-decoration:none;
}
.tabcontent {
    display:none;
    border-top:5px solid #f8f8f8;
    clear:both;
}
.tabcontent.active {
    display:block!important;
    padding:10px!important;
    background:#fff;
    border: 1px solid #B9B9B9;
    border-radius: 4px 0 4px 4px;
    z-index: 2;
    position: relative;
    top: -2px;
    color: #000;
    font-family: tahoma;
    font-size: 9pt;
    margin:15px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="tabs">
    <a href="#" data-tab="1" class="tab active">line</a>
    <a href="#" data-tab="2" class="tab">pie</a>
    <a href="#" data-tab="3" class="tab">pie2</a>
    <div data-content='1' class='tabcontent active'>
        <div id="chartContainer" style="height: 300px;direction:ltr;"></div>
    </div>
    <div data-content='2' class='tabcontent'>
        <div id="piechart1" style="width:100%!important;height: 500px; direction:ltr;"></div>
    </div>
    <div data-content='3' class='tabcontent'>
        <div id="chart2" style="width:100%;height: 500px; direction:ltr;"></div>
    </div>
</div>

jsfiddle

Answer 1

问题是因为当您最初呈现图表时，选项卡 2 和选项卡 3 的宽度和高度将为零，因为 canvasjs 采用默认宽度和高度。因此，我们需要做的是，只要通过更新图表的大小在选项卡上激活时调用 chart.render()。

这里是JSFiddle.

var chartIndex = $(this).data('tab');
charts[chartIndex-1].render();

jQuery 多个选项卡上的 canvasjs 图表显示不正确

incorrect display canvasjs chart on jQuery multiple tab

jquery

tabs

canvasjs