javascript - 如何防止 CanvasJS 在图表上显示值？

Question

如何阻止 CanvasJS 在图表上显示值？具体来说，我想隐藏图表中每个数据点上显示的值，同时仍显示数据点本身。 CanvasJS 中是否有内置选项或方法可以执行此操作，或者我需要直接修改图表的 CSS 或 JavaScript 来实现此效果？

我需要显示 Day 和 Month 值，不带缩写词(th、rd、nd 和 st)在 CanvasJS 图表中。

我找不到应该在哪个 .php 或 .js 文件中更改这些选项。

仪表板.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 的帮助下实现这一目标以及以下 Ordinal numbers 的规则集.

• st is used with numbers ending in 1 (e.g. 1st, pronounced first)
• nd is used with numbers ending in 2 (e.g. 92nd, pronounced ninety-second)
• rd is used with numbers ending in 3 (e.g. 33rd, pronounced thirty-third)
• As an exception to the above rules, all the "teen" numbers ending with 11, 12 or 13 use -th (e.g. 11th, pronounced eleventh, 112th, pronounced one hundred [and] twelfth)
• th is used for all other numbers (e.g. 9th, pronounced ninth).

这是一个例子:

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>