Как я могу показать только «Дата и время» по оси X в области диаграммы позвоночника в canvasjs? - PullRequest
Новая
       134

Как я могу показать только «Дата и время» по оси X в области диаграммы позвоночника в canvasjs?

0 голосов
/ 11 июля 2019

Мне нужно показать только «Дата и месяц» по оси X на диаграмме позвоночника области. В настоящее время он показывает ГГГГММДД h: i: s, но мне нужно показать только DDMM по оси X.

Мне нужно показать только «Дата и месяц» по оси X в области диаграммы позвоночника. Например, в настоящее время он показывает значения (2010-10-05, 2012-02-12) значений по оси X, но мне нужно показать их (например, 5 октября, 12 февраля).

Я использую приведенный ниже код в диаграмме области позвоночника canvasjs. 

$( 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 как: 11 июля, 12 июля, 13 июля и т. Д. Любая помощь будет признательна.

1 Ответ

0 голосов
/ 12 июля 2019

CanvasJS поддерживает числовой объект и дату в х-значениях , а не в строке.Передача значения x в качестве объекта даты и установка valueFormatString в "D MMMM" показывает метки оси как 5 октября, 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>
...