jQuery 图表未动态呈现

Question

我目前使用的是应该动态呈现的 Flot 图表。

代码基本上重复所有名称为"characterChart"的div，并根据索引创建多个Flot图表。

基本上是代码：

<div id="salesSelectorItems" class="chart-data-selector-items mt-3">
    @foreach($characters as $key=>$character)
        <div class="chart chart-sm" data-sales-rel="{{ $character->id }}" id="flotDashSales_{{ $key }}" name="characterChart" class="chart-active" style="height: 203px;"></div>
    @endforeach

    <script>
        var flotDashSalesData = [];
        $(document).ready(function() {                                       
            $('div[name=characterChart]').each(function (index, value) {                                     
                flotDashSalesData[index] = [{
                    data: [
                        ["Jan", 140],
                        ["Feb", 240],
                        ["Mar", 190],
                        ["Apr", 140],
                        ["May", 180],
                        ["Jun", 320],
                        ["Jul", 270],
                        ["Aug", 180]
                    ],
                    color: "#0088cc"
                }];
            });
        });     
    </script>
</div>

现在，有包含图表所有数据的代码（在单独的包含文件中）：

var flotDashSales = [];
$('div[name=characterChart]').each(function (index, value) { 
    console.log(index);
    flotDashSales[index] = $.plot('#flotDashSales_' + index, flotDashSalesData[index], {
        series: {
            lines: {
                show: true,
                lineWidth: 2
            },
            points: {
                show: true
            },
            shadowSize: 0
        },
        grid: {
            hoverable: true,
            clickable: true,
            borderColor: 'rgba(0,0,0,0.1)',
            borderWidth: 1,
            labelMargin: 15,
            backgroundColor: 'transparent'
        },
        yaxis: {
            min: 0,
            color: 'rgba(0,0,0,0.1)'
        },
        xaxis: {
            mode: 'categories',
            color: 'rgba(0,0,0,0)'
        },
        legend: {
            show: false
        },
        tooltip: true,
        tooltipOpts: {
            content: '%x: %y',
            shifts: {
                x: -30,
                y: 25
            },
            defaultTheme: false
        }
    });
});

如您所见，我为实现此目标所做的尝试是创建一个数组，在所有名为 characterChart 的 div 上重复并按索引创建多个图表。

但是，还是不行。

我做错了什么？

Answer 1

我已经通过删除解决了这个问题：

$(document).ready(function() {

我假设它尝试初始化组件两次，导致 Flot 不显示。

jQuery 图表未动态呈现

jQuery Flot Chart is not rendering dynamically

javascript

jquery

each

flot

laravel-blade