javascript - 将 axisX 日期转换为 Html5 5 折线图中的文本

Question

将 X 轴日期转换为 Html5 5 折线图中的文本，当前 X 轴上出现 'jan,feb....' 。想要显示主题名称之类的文本。这里的引用站点是 http://canvasjs.com/html5-javascript-line-chart/

 $(function () {
        var chart = new CanvasJS.Chart("chartContainer",
        {
          theme: "theme2",
          title:{
            text: "Line Chart"
          },
          animationEnabled: true,
          axisX: {
            valueFormatString: "MMM",
            interval:1,
            intervalType: "month"

          },
          axisY:{
            includeZero: false

          },
          data: [
          {        
            type: "line",
            //lineThickness: 3,        
            dataPoints: [
            { x: new Date(2012, 00, 1), y: 450 },
            { x: new Date(2012, 01, 1), y: 414},
            { x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
            { x: new Date(2012, 03, 1), y: 460 },
            { x: new Date(2012, 04, 1), y: 450 },
            { x: new Date(2012, 05, 1), y: 500 },
            { x: new Date(2012, 06, 1), y: 480 },
            { x: new Date(2012, 07, 1), y: 480 },
            { x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
            { x: new Date(2012, 09, 1), y: 500 },
            { x: new Date(2012, 10, 1), y: 480 },
            { x: new Date(2012, 11, 1), y: 510 }

            ]
          }


          ]
        });

    chart.render();
    });

Answer 1

您需要将带有值的label键放入对象中。这是jsFiddle .

dataPoints: [{
      x: new Date(2012, 00, 1),
      y: 450,
      label: '2012-00-01'
    }, {
      x: new Date(2012, 01, 1),
      y: 414,
      label: '2012-01-01'
    }, {
      x: new Date(2012, 02, 1),
      y: 520,
      label: '2012-02-01',
      indexLabel: "highest",
      markerColor: "red",
      markerType: "triangle"
    }, {
      x: new Date(2012, 08, 1),
      y: 410,
      label: '2012-08-01',
      indexLabel: "lowest",
      markerColor: "DarkSlateGrey",
      markerType: "cross"
    }, {
      x: new Date(2012, 09, 1),
      y: 500,
      label: '2012-09-01'
    },