更改 CHART.JS 条形图上的标签

问题描述 投票:0回答:0

对于图表 .ct-chart-ranking,标签当前显示为星期一、星期二、星期三、星期四、星期五、星期六、星期日。

我想显示为 Mon, Tue, Wed, Thu, Fri, Sat, Sun.

下面是定义图表的脚本,我还有一些其他文件,包括 chart.js,它具有标签变量,即星期一、星期二等。

他们在代码中有“shortDays”,但我正在努力将其实现到我的实际代码中。

 <script>

    $(document).ready(function(){

      var userStatsUrl = '{{ path("ajax_get_users_stat") }}';
      var orderStatUrl = '{{ path("ajax_get_orders_stat")}}';
      $.ajax({
        url: userStatsUrl,
        method: 'POST',
        success: function(r){
          if(r.success){
             
            var chart = new Chartist.Bar('.ct-chart-ranking', {
                labels: r.days,
                series: [
                    r.stats
                ]
            }, {
                low: 0,
                showArea: true,
                plugins: [
                Chartist.plugins.tooltip()
                ],
                axisX: {
                    // On the x-axis start means top and end means bottom
                    position: 'end'
                },
                axisY: {
                    // On the y-axis start means left and end means right
                    showGrid: false,
                    showLabel: false,
                    offset: 0
                }
                });
            
            chart.on('draw', function(data) {
                if(data.type === 'line' || data.type === 'area') {
                data.element.animate({
                    d: {
                    begin: 2000 * data.index,
                    dur: 2000,
                    from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
                    to: data.path.clone().stringify(),
                    easing: Chartist.Svg.Easing.easeOutQuint
                    }
                });
                }
            });
    
          }
        }
      });



      $.ajax({
        url: orderStatUrl,
        method: 'POST',
        success: function(r){
           if(r.success){
             

         
                 new Chartist.Line('.ct-chart-sales-value', {
            labels:r.days,
            series: [
                r.stats
            ]
          }, {
            low: 0,
            showArea: true,
            fullWidth: true,
            plugins: [
              Chartist.plugins.tooltip()
            ],
            axisX: {
                // On the x-axis start means top and end means bottom
                position: 'end',
                showGrid: true
            },
            axisY: {
                // On the y-axis start means left and end means right
                showGrid: false,
                showLabel: false,
                labelInterpolationFnc: function(value) {
                    return '$' + (value / 1) + 'k';
                }
            }
        });  
           }
        }
      });
    });
  </script>

我努力改变

标签:r.days,

标签:r.shortDays,

但这只是阻止了标签的显示。

javascript charts chart.js axis-labels
© www.soinside.com 2019 - 2024. All rights reserved.