Настройка меток осей в CanvasJS Chart

Question

Мне нужны значения Day и Month для отображения без акронимов (th, rd, nd и st) в диаграммах CanvasJS.

Не могу найти, в каком файле .php или .js мне нужно изменить эти параметры.

dashboard.blade

@extends('layouts.staff')
@section('style')

@endsection
@section('content')

    <div class="row">
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card bg-gradient-directional-primary">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="media-body white text-left">
                                <h3>{{ $signal }}</h3>
                                <span class="font-weight-bold text-uppercase">Your Signal</span>
                            </div>
                            <div class="align-self-center">
                                <i class="icon-rocket white font-large-2 float-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card bg-gradient-directional-warning">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="media-body white text-left">
                                <h3>{{$category}}+</h3>
                                <span class="font-weight-bold text-uppercase">Category</span>
                            </div>
                            <div class="align-self-center">
                                <i class="icon-settings white font-large-2 float-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card bg-gradient-directional-success">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="media-body white text-left">
                                <h3>{{$blog}}+</h3>
                                <span class="font-weight-bold text-uppercase">Blog</span>
                            </div>
                            <div class="align-self-center">
                                <i class="icon-list white font-large-2 float-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-6 col-12">
            <div class="card bg-gradient-directional-danger">
                <div class="card-content">
                    <div class="card-body">
                        <div class="media d-flex">
                            <div class="media-body white text-left">
                                <h3>{{$user}}+</h3>
                                <span class="font-weight-bold text-uppercase">Total User</span>
                            </div>
                            <div class="align-self-center">
                                <i class="icon-user white font-large-2 float-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header">
                        <h5>Signal Statistic</h5>
                        <div class="card-header-right">
                            <ul class="list-unstyled card-option">
                                <li><i class="fa fa-chevron-left"></i></li>
                                <li><i class="fa fa-window-maximize full-card"></i></li>
                                <li><i class="fa fa-minus minimize-card"></i></li>
                                <li><i class="fa fa-times close-card"></i></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-block">

                        <div class="row">
                            <div class="col-md-12">
                                <!-- small box -->
                                <div class="small-box">
                                    <canvas id="lineChart" style="width: auto; height: auto"></canvas>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('scripts')

    <script type="text/javascript" src="{{ asset('assets/admin/js/Chart.min.js') }}"></script>

    <script language="JavaScript">
        displayLineChart();
        function displayLineChart() {
            var data = {
                labels: [
                    @foreach($dL as $l)
                        '{{ $l }}',
                    @endforeach
                ],
                datasets: [
                    {
                        label: "{{ $basic->title }}",
                        fillColor: "#3dbcff",
                        strokeColor: "#0099ff",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: [
                            @foreach($dV as $d)
                                '{{ $d }}',
                            @endforeach
                        ]
                    }
                ]
            };
            var ctx = document.getElementById("lineChart").getContext("2d");
            var options = {
                responsive: true, maintainAspectRatio: false
            };
            var lineChart = new Chart(ctx).Line(data, options);
        }
    </script>
@endsection

Answer 1

Этого можно добиться с помощью labelFormatter и следующего набора правил Порядковые номера .

• st используется счисла, оканчивающиеся на 1 (например, 1-й, произносится как первый)
• nd используется с номерами, оканчивающимися на 2 (например, 92-й, произносится как девяносто второй)
• rd используется с номерами, заканчивающимися на 3 (например,33-е, произносится тридцать третий)
• В качестве исключения из вышеприведенных правил все «подростковые» числа, заканчивающиеся на 11, 12 или 13, используют -ое (например, 11-е, произносится как одиннадцатое, 112-е, произносится как сто [и] двенадцатый)
• th используется для всех остальных чисел (например, 9-й, произносится девятый).

Вот пример:

var chart = new CanvasJS.Chart("chartContainer", {
axisX: {
    labelFormatter: function(e) {
        return ordinalSuffix(e.value.getDate()) + " " + CanvasJS.formatDate(e.value, "MMM");
    }
},
data: [{
    type: "area",
    dataPoints: [
    	{ x: new Date(2012, 01, 1), y: 26 },
        { x: new Date(2012, 01, 3), y: 38 },
        { x: new Date(2012, 01, 5), y: 43 },
        { x: new Date(2012, 01, 7), y: 29 },
        { x: new Date(2012, 01, 11), y: 41 },
        { x: new Date(2012, 01, 13), y: 54 },
        { x: new Date(2012, 01, 20), y: 66 },
        { x: new Date(2012, 01, 21), y: 60 },
        { x: new Date(2012, 01, 25), y: 53 },
        { x: new Date(2012, 01, 27), y: 60 }
    ]
}]
});

chart.render();

function ordinalSuffix(num) {
    var j = num % 10, k = num % 100;
    return ((j == 1 && k != 11) ? num + "st" : (j == 2 && k != 12) ? num + "nd" : (j == 3 && k != 13) ? num + "rd" : num + "th");
}

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 200px; width: 100%;"></div>