1 

window.onload = function() {
  var chart = new CanvasJS.Chart("chartContainer", {
    zoomEnabled: false,
    animationEnabled: true,
    title: {
      text: "Mobile Phone Subscriptions"
    },
    axisY2: {
      valueFormatString: "0.0 bn",

      maximum: 1.2,
      interval: .2,
      interlacedColor: "#F5F5F5",
      gridColor: "#D7D7D7",
      tickColor: "#D7D7D7"
    },
    theme: "theme2",
    toolTip: {
      shared: true
    },
    legend: {
      verticalAlign: "bottom",
      horizontalAlign: "center",
      fontSize: 15,
      fontFamily: "Lucida Sans Unicode"

    },
    data: [{
        type: "line",
        lineThickness: 3,
        axisYType: "secondary",
        showInLegend: true,
        name: "India",
        dataPoints: [{
            x: new Date(2001, 0),
            y: 0
          }, {
            x: new Date(2002, 0),
            y: 0.001
          }, {
            x: new Date(2003, 0),
            y: 0.01
          }, {
            x: new Date(2004, 0),
            y: 0.05
          }, {
            x: new Date(2005, 0),
            y: 0.1
          }, {
            x: new Date(2006, 0),
            y: 0.15
          }, {
            x: new Date(2007, 0),
            y: 0.22
          }, {
            x: new Date(2008, 0),
            y: 0.38
          }, {
            x: new Date(2009, 0),
            y: 0.56
          }, {
            x: new Date(2010, 0),
            y: 0.77
          }, {
            x: new Date(2011, 0),
            y: 0.91
          }, {
            x: new Date(2012, 0),
            y: 0.94
          }


        ]
      }, {
        type: "line",
        lineThickness: 3,
        showInLegend: true,
        name: "China",
        axisYType: "secondary",
        dataPoints: [{
            x: new Date(2001, 00),
            y: 0.18
          }, {
            x: new Date(2002, 00),
            y: 0.2
          }, {
            x: new Date(2003, 0),
            y: 0.25
          }, {
            x: new Date(2004, 0),
            y: 0.35
          }, {
            x: new Date(2005, 0),
            y: 0.42
          }, {
            x: new Date(2006, 0),
            y: 0.5
          }, {
            x: new Date(2007, 0),
            y: 0.58
          }, {
            x: new Date(2008, 0),
            y: 0.67
          }, {
            x: new Date(2009, 0),
            y: 0.78
          }, {
            x: new Date(2010, 0),
            y: 0.88
          }, {
            x: new Date(2011, 0),
            y: 0.98
          }, {
            x: new Date(2012, 0),
            y: 1.04
          }


        ]
      }, {
        type: "line",
        lineThickness: 3,
        showInLegend: true,
        name: "USA",
        axisYType: "secondary",
        dataPoints: [{
            x: new Date(2001, 00),
            y: 0.16
          }, {
            x: new Date(2002, 0),
            y: 0.17
          }, {
            x: new Date(2003, 0),
            y: 0.18
          }, {
            x: new Date(2004, 0),
            y: 0.19
          }, {
            x: new Date(2005, 0),
            y: 0.20
          }, {
            x: new Date(2006, 0),
            y: 0.23
          }, {
            x: new Date(2007, 0),
            y: 0.261
          }, {
            x: new Date(2008, 0),
            y: 0.289
          }, {
            x: new Date(2009, 0),
            y: 0.3
          }, {
            x: new Date(2010, 0),
            y: 0.31
          }, {
            x: new Date(2011, 0),
            y: 0.32
          }, {
            x: new Date(2012, 0),
            y: 0.33
          }


        ]
      }



    ],
    legend: {
      cursor: "pointer",
      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();
}
#control_panel_container {
  text-align: center;
}
.cp_content_container {
  padding-top: 12px;
  text-align: left;
  color: #373737;
}
.cp_content_container > div {
  display: none;
}
input.control_panel_tabs {
  display: none;
}
label.control_panel_tabs {
  font-family: Verdana, Tahoma, sans-serif;
  font-weight: 600;
  background-color: #C0B9C7;
  color: white;
  display: inline-block;
  padding: 15px 25px;
  text-align: center;
  border: 2px solid black;
  border-radius: 15px;
}
label.control_panel_tabs:hover {
  background-color: #AA95B9;
  color: #fff;
  cursor: pointer;
}
input:checked + label.control_panel_tabs {
  background: #9471AB;
  color: #fff;
}
#cp_tab1:checked ~ .cp_content_container #cp_content1,
#cp_tab2:checked ~ .cp_content_container #cp_content2 {
  display: block;
}
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="control_panel_container">
  <input class="control_panel_tabs" id="cp_tab1" type="radio" name="cp_tabs" checked>
  <label class="control_panel_tabs" for="cp_tab1">tab 1</label>
  <input class="control_panel_tabs" id="cp_tab2" type="radio" name="cp_tabs">
  <label class="control_panel_tabs" for="cp_tab2">tab 2</label>
  <div class="cp_content_container">
    <div id="cp_content1"></div>
    <div id="cp_content2">
      <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    </div>
  </div>
</div>

我在默认情况下隐藏的选项卡中有一个图表。当用户单击该选项卡时，它们就会出现。但是，它们有点倾斜，水平平滑并垂直拉伸。请参阅 Fiddle 了解我的意思，它位于“选项卡 2”下。

更改浏览器的缩放级别（至少在 Firefox 中）似乎可以使其正确。

我注意到如果我把它放在标签 1 中，但是，在页面加载时它会正确显示。只有当它不是默认选项卡时，它才会扭曲并需要缩放更改才能正确显示。

这里发生了什么？看起来该图仅在我打开选项卡时才呈现（根据动画判断）。我在想也许是因为displayCSS 中的属性，但也许是因为它需要在页面加载时呈现？

这是一个可编辑的小提琴：http: //jsfiddle.net/ryfy8j9s/1/

4

2 回答 2

1

可能的解决方案是在加载图形后立即在窗口上调用 resize 方法，我设法纠正它

$(window).resize();
于 2015-10-03T16:22:45.740 回答
1

问题是图表的默认宽度设置为 500，即使您在 window.onload 中调用 chart.render()，由于它的容器不可见，它会以默认宽度创建图表，并且一直停留在那里直到图表。再次调用 render()（例如，用于调整窗口大小）。 这不是唯一的问题。 例如，如果您调整窗口大小以修复图表，但随后单击返回 tab1，再次调整窗口大小，然后单击返回 tab2，图表再次大小错误。

您可以在创建图表时设置显式宽度，但这会使图表无法响应调整大小，这可能不是您想要的。

我建议在 tab2 上使用单击处理程序来检查这种确切情况，并仅在图表可见且与其容器大小不同时才调用 chart.render()：

window.onload = function () {
    $("#cp_tab2").on("click", function() {
        if ($("#chartContainer").is(":visible") && $("#chartContainer canvas").width() !== $("#chartContainer").width()) {
            chart.render();
        }
    });

    var chart = new CanvasJS.Chart("chartContainer", {
        zoomEnabled: false,
// etc.

我在你的小提琴上试过这个，它解决了这个问题。请参阅我的 jsFiddle 分支。有了这个工作。

于 2015-10-03T20:17:54.613 回答