canvasJS不同屏幕之間的x軸改變

我使用canvasJS來繪製圖表，但是當頁面改變不同的窗口時，X軸將顯示不同的畫面。當頁面在小窗口，顯示右像這樣enter image description here開放的，但是當頁面顯示大窗口顯示錯誤的這樣enter image description here canvasJS不同屏幕之間的x軸改變

var chart = new CanvasJS.Chart("chartContainer", { 
      zoomEnabled: false, 
      animationEnabled: false, 
      title: { 
       text: "BJS Site Record Item QTY" 
      }, 
      axisY2: { 
       valueFormatString: "0", 
       maximum: 50, 
       interval: 5, 
       interlacedColor: "#F5F5F5", 
       gridColor: "#D7D7D7", 
       tickColor: "#D7D7D7" 
      }, 
      axisX:{ 
       //title: "BJS Site Record Item QTY", 
       interval: 1 
      }, 
      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: "BJSC", 
       dataPoints: [ 

        { x: new Date(2016,11,08), y:11 }, 

        { x: new Date(2016,11,09), y:0 }, 

        { x: new Date(2016,11,10), y:0 }, 

        { x: new Date(2016,11,11), y:0 }, 

        { x: new Date(2016,11,12), y:0 }, 

        { x: new Date(2016,11,13), y:0 }, 

        { x: new Date(2016,11,14), y:0 }, 

       ] 
      },   
      ], 
      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(); 
} 
</script>

來源

2016-11-15 scott

斯科特，

intervalType默認爲「數字」，當你設置的時間間隔。如果您希望間隔時間爲1天，請將intervalType設置爲「day」，並將設置間隔設置爲1.

請檢查此代碼。

var chart = new CanvasJS.Chart("chartContainer", { 
 
    zoomEnabled: false, 
 
    animationEnabled: false, 
 
    title: { 
 
    text: "BJS Site Record Item QTY" 
 
    }, 
 
    axisY2: { 
 
    valueFormatString: "0", 
 
    maximum: 50, 
 
    interval: 5, 
 
    interlacedColor: "#F5F5F5", 
 
    gridColor: "#D7D7D7", 
 
    tickColor: "#D7D7D7" 
 
    }, 
 
    axisX: { 
 
    //title: "BJS Site Record Item QTY", 
 
    interval: 1, 
 
    intervalType: "day" 
 
    }, 
 
    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: "BJSC", 
 
     dataPoints: [ 
 
     { x: new Date(2016, 11, 08), y: 11 }, 
 
     { x: new Date(2016, 11, 09), y: 0 }, 
 
     { x: new Date(2016, 11, 10), y: 0 }, 
 
     { x: new Date(2016, 11, 11), y: 0 }, 
 
     { x: new Date(2016, 11, 12), y: 0 }, 
 
     { x: new Date(2016, 11, 13), y: 0 }, 
 
     { x: new Date(2016, 11, 14), y: 0 } 
 
     ] 
 
    }, 
 
    ], 
 
    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();

<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
 
<div id="chartContainer" style="height: 250px; width: 100%;"></div>

來源

2016-11-16 05:04:04

canvasJS不同屏幕之間的x軸改變

回答

相關問題