Question

我只需要在区域脊柱图中的x轴上显示“日期和月份”。当前，它显示YYYYMMDD h：i：s，但我只需要在x轴上显示DDMM。

我只需要在区域脊柱图中的x轴上显示“日期和月份”。例如，当前它在x轴上显示值（2010-10-05，2012-02-12）值，但我需要显示它（例如10月5日，2月12日）。

我在canvas.js的区域脊柱图中使用以下代码。

$( document ).ready(function () {
    var chart1 = new CanvasJS.Chart("chartContainer1",
    {
        animationEnabled: true,
        title:{
            text: "Voting Trends"
        },
        axisY: {
            title: "VOTES",
            gridThickness: 0
        },
        data: [{
            type: "splineArea",
            color: "rgba(54,158,173,.7)",
            markerSize: 5,
            xValueFormatString: "",
            dataPoints: [      
                {x: "10 Jul", y: 1, indexLabel: "1"},
                {x: "11 Jul", y: 2, indexLabel: "2"}, 
            ]
        }]
    }); 
    chart1.render();
});

此代码未在x轴上生成任何值。因此，该图未在其上显示确切点。我只需要在x轴上将这些值显示为： 7月11日，7月12日，7月13日等任何帮助将不胜感激。

Answer 1

CanvasJS支持x-values中的数字和日期对象，而不支持字符串。传递x值作为日期对象并将valueFormatString设置为“ D MMMM”，则将轴标签显示为10月5日，2月12日等。

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  title:{
    text: "Voting Trends"
  },
  axisX: {
    valueFormatString: "D MMMM",
    interval: 1,
    intervalType: "day"
  },
  axisY: {
    title: "VOTES",
    gridThickness: 0
  },
  data: [{
    type: "splineArea",
    color: "rgba(54,158,173,.7)",
    markerSize: 5,
    dataPoints: [      
      {x: new Date("Jul 10 2019"), y: 1, indexLabel: "1"},
      {x: new Date("Jul 11 2019"), y: 2, indexLabel: "2"}, 
    ]
  }]
});

chart.render();

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

如何在canvas.js的区域书脊图中仅在X轴上显示“日期和时间”？

1 个答案: