Question

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

代码基本上会在所有div上重复使用“ characterChart”名称，并根据索引创建多个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
        }
    });
});

如您所见，我为实现此目的所做的工作是创建一个数组，并在所有div上重复使用characterChart名称，并通过索引创建多个图表。

但是，它仍然无法正常工作。

我在做什么错了？

Answer 1

我设法通过删除来解决它：

$(document).ready(function() {

我假设它试图两次初始化组件，导致Flot无法显示。

jQuery Flot Chart不能动态呈现

1 个答案: