jQuery 图表未动态呈现
jQuery Flot Chart is not rendering dynamically
我目前使用的是应该动态呈现的 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 上重复并按索引创建多个图表。
但是,还是不行。
我做错了什么?
我已经通过删除解决了这个问题:
$(document).ready(function() {
我假设它尝试初始化组件两次,导致 Flot 不显示。
我目前使用的是应该动态呈现的 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 上重复并按索引创建多个图表。
但是,还是不行。
我做错了什么?
我已经通过删除解决了这个问题:
$(document).ready(function() {
我假设它尝试初始化组件两次,导致 Flot 不显示。