如何在 canvasjs 区域脊柱图表的 X 轴中仅显示 "Date and Time"？

Question

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

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

我在 canvasjs 的 Area Spine Chart 中使用下面的代码。

$( 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 支持数字，date-object 在 x-values and not string. Passing x-value as date-object and setting 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>

如何在 canvasjs 区域脊柱图表的 X 轴中仅显示 "Date and Time"？

How can I show only "Date and Time" in X-axis in area spine chart in canvasjs?

html

charts

html5-canvas

canvasjs