laravel 图表js中有多个标签，我想更改标签的顺序

lymnna71 于 2023-02-10 发布在其他

关注(0)|答案(2)|浏览(108)

const subLabels = {
        id: 'subLabels',
        afterDatasetsDraw(chart, args, pluginOptions) {
            const { ctx, chartArea: {left, right, top, bottom, width, height}} = chart;
            ctx.save();

            // the problem
            @foreach($categories as $key => $cat)
                subLabelText("{{$cat['title']}}", width / {{count($categories)}}  * {{$key}})
            @endforeach

            function subLabelText(text, x) {
                ctx.font = 'bolder 12px sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText(text, x + left, bottom + 20);
            }
        }
    }
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [
                @foreach($categories as $key => $cat)
                    @foreach($cat['verbatim'] as $verbatim)
                        '{{ $verbatim }}',
                    @endforeach
                @endforeach
            ],
            datasets: [
                ...
            ]
        },
        plugins: [ChartDataLabels, subLabels],
        options: {
            ...
        }
    });

我从数据库中按照列“position”的顺序获取了类别标题，但是函数subLabelText（）在数据库中按照id的顺序显示了它。
我使用了var_dump（$categories），它按照“位置”的顺序给出数据。
有人能帮忙吗？

laravel

来源：https://stackoverflow.com/questions/75401373/multiple-labels-in-chart-js-i-want-to-change-the-order-of-the-labels

2条答案

按热度按时间

j9per5c41#

看起来$key参数是这里的问题所在，因为它代表foreach循环的当前迭代索引，而不是数据库中的position字段。要解决这个问题，可以修改代码以使用position字段：

const subLabels = {
        id: 'subLabels',
        afterDatasetsDraw(chart, args, pluginOptions) {
            const { ctx, chartArea: {left, right, top, bottom, width, height}} = chart;
            ctx.save();

          
            @foreach($categories as $cat)
                subLabelText("{{$cat['title']}}", width / {{count($categories)}}  * {{$cat['position']}})
            @endforeach

            function subLabelText(text, x) {
                ctx.font = 'bolder 12px sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText(text, x + left, bottom + 20);
            }
        }
    }

这将根据position字段正确地对类别进行排序。

赞(0）回复(0）举报 2023-02-10

wpcxdonn2#

要更改图表中标签的顺序，您需要在图表配置中修改数据对象的labels属性。
一种方法是在生成图表标签之前，先按所需顺序对$categories数组进行排序。例如，如果要按升序基于“位置”字段对类别进行排序：

$categories.sort(function(a, b) {
  return a.position - b.position;
});

labels: [
  @foreach($categories as $cat)
    @foreach($cat['verbatim'] as $verbatim)
      '{{ $verbatim }}',
    @endforeach
  @endforeach
],

赞(0）回复(0）举报 2023-02-10

我来回答

laravel 图表js中有多个标签，我想更改标签的顺序

2条答案

相关问题

热门标签

最新问答