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

convert axisX date to text in Html5 5 line chart

本文关键字：折线图 文本 Html5 axisX 日期 转换      更新时间：2023-09-26

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

您需要将具有值的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'
    },
相关文章：