Question

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>

我在一个默认隐藏的标签中有一个图表。当用户点击该标签时，它们会出现。但是，它们有点倾斜，水平地滑动并垂直拉伸。请参阅小提琴我的意思，它位于“标签2”下。

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

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

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

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

Answer 1

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

$(window).resize();

Answer 2

问题是图表的默认宽度设置为500，即使您在window.onload中调用chart.render（），因为它的容器不可见，它会以默认宽度创建图表并且它被卡在那里，直到再次调用chart.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.

我在你的小提琴上尝试了这个，它解决了这个问题。通过此工作，请查看我的fork of your jsFiddle.。

CanvasJS图形倾斜直到缩放级别改变？

2 个答案: