javascript - 条形图动画按降序排列

Question

我有一个 PHP 搜索页面，工会成员可以在其中查看他们的资历级别。结果页面显示他们的统计数据以及显示他们资历级别的 chart.js 水平条形图。一切都很好，除了栏从右边开始动画。

我希望栏从左侧开始动画，从 397 到他们的资历级别。

<script type="text/javascript">
  $('#details').on('shown.bs.collapse', function () {

Chart.pluginService.register({
  beforeRender: function (chart) {
    if (chart.config.options.showAllTooltips) {
        // create an array of tooltips
        // we can't use the chart tooltip because there is only one tooltip per chart
        chart.pluginTooltips = [];
        chart.config.data.datasets.forEach(function (dataset, i) {
            chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                chart.pluginTooltips.push(new Chart.Tooltip({
                    _chart: chart.chart,
                    _chartInstance: chart,
                    _data: chart.data,
                    _options: chart.options.tooltips,
                    _active: [sector]
                }, chart));
            });
        });

        // turn off normal tooltips
        chart.options.tooltips.enabled = false;
    }
},
  afterDraw: function (chart, easing) {
    if (chart.config.options.showAllTooltips) {
        // we don't want the permanent tooltips to animate, so don't do anything till the animation runs at least once
        if (!chart.allTooltipsOnce) {
            if (easing !== 1)
                return;
            chart.allTooltipsOnce = true;
        }

        // turn on tooltips
        chart.options.tooltips.enabled = true;
        Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
            tooltip.initialize();
            tooltip.update();
            // we don't actually need this since we are not animating tooltips
            tooltip.pivot();
            tooltip.transition(easing).draw();
        });
        chart.options.tooltips.enabled = false;
    }
  }
});

Chart.plugins.register({
  beforeDraw: function(chartInstance, easing) {
    var ctx = chartInstance.chart.ctx;
    ctx.fillStyle = 'rgba(89,105,255,.15)'; // your color here

    var chartArea = chartInstance.chartArea;
    ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
  }
});
      var ctx = document.getElementById("chartjs_bar").getContext('2d');
                var data = myChart = new Chart(ctx, {
                    type: 'horizontalBar',
                    data: {

                        datasets: [{
                            backgroundColor: [
                               "#5969ff",
                                "#ff407b",
                                "#25d5f2",
                                "#ffc750",
                                "#2ec551",
                                "#7040fa",
                                "#ff004e"
                            ],
                            data:<?php echo json_encode($ChartRank); ?>,
                        }]
                    },

                    options: {
showAllTooltips: true,

tooltips: {

  displayColors:false,
          custom: function(tooltip) { },
          callbacks: {
            // use label callback to return the desired label
            label: function(tooltipItem, data) {
              return  "Your Seniority : " + tooltipItem.xLabel;
            },
            // remove title
            title: function(tooltipItem, data) {
              return;
            }
          }
        },
                      title: {
            display: true,
            padding: 5,
            text: 'Seniority level'
        },

scales: {
                    xAxes: [{
                            display: true,
                            gridLines: {
                display:false,
                drawBorder:false
            },
                            ticks: {
                              reverse:true,
                                min:1,
                                stepSize: 50,
                                max: 397
                            }
                        }],

                        yAxes: [{


                display: true,
                            gridLines: {
                display:false,
                drawBorder:false
            }
            }]
                },
                      responsive: true,
                           legend: {
                        display:false,
                        padding:0,
                        labels: {

                            fontColor: '#71748d',
                            fontFamily: 'Circular Std Book',
                            fontSize: 14,
                        }
                    },
                }
                });
              });
    </script>

标签： javascriptphpchart.js