将axisX日期转换为HTML5 5折线图中的文本

debugcn 发表于 Dev

拉曼

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

瓦索123

您需要将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'
    },

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。