canvasJS x轴在不同屏幕之间切换

Question

我使用canvasJS绘制图表，但当页面更改不同的窗口时，X轴将显示不同的。当小窗口中的页面打开时显示如此enter image description here，但当页面显示大窗口时显示错误enter image description here

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>

Answer 1

斯科特，

设置间隔时，

intervalType默认为“number”。如果您希望间隔为1天，请将intervalType设置为＆＃34; day＆＃34;以及设置间隔为1。

检查此代码。

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;