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

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>

我在默认隐藏的选项卡中有一个图表。当用户单击该选项卡时，它们就会出现。然而，它们有点倾斜，水平方向被挤压，垂直方向被拉伸。请参阅 Fiddle 了解我的意思，它在 "tab 2".

下

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

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

这是怎么回事？看起来图形只在我打开选项卡时呈现（根据动画判断）。我在想也许是因为 CSS 中的 display 属性但也许是因为它需要在页面加载时呈现？

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

Answer 1

可能的解决方案是在 window 加载图表后立即调用 resize 方法，我设法像那样更正了它

$(window).resize();

Answer 2

问题是图表的默认宽度设置为 500，即使您在 window.onload 中调用 chart.render()，由于其容器不可见，它会在默认宽度并且它一直停留在那里直到再次调用 chart.render() （例如，对于 window 调整大小）。 这不是唯一的问题。例如，如果您调整 window 的大小来修复图表，但随后单击返回选项卡 1，再次调整 window 的大小, 然后单击返回到 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.

我在你的 fiddle 上试过了，它解决了这个问题。看看我的 fork of your jsFiddle. 这个工作。

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

CanvasJS graphs skewed until zoom level changed?

javascript

jquery

html

css

canvasjs