Nicht abgefangener Fehler: Ungültige Dimensionen für Grundstück, width = null, Tiefe = null
Ich bin mit flot Kreisdiagramm zeigt für das Plotten pie chats für Neue Besucher, Absprungrate, Suche, Verkehr . Aber es zeigt Fehlermeldung in der Konsole.
Nicht abgefangener Fehler: Ungültige Dimensionen für Grundstück, width = null, height =
null
Habe ich dieses html wie:
<div class="row">
<div class="col-lg-3 col-sm-6">
<!-- START widget-->
<div data-toggle="play-animation" data-play="fadeInDown" data-offset="0" data-delay="100" class="panel widget">
<div class="panel-body bg-primary">
<div class="row row-table row-flush">
<div class="col-xs-8">
<p class="mb0">New visitors</p>
<h3 class="m0">1.5k</h3>
</div>
<div class="col-xs-4 text-center">
<em class="fa fa-user fa-2x"><sup class="fa fa-plus"></sup>
</em>
</div>
</div>
</div>
<div class="panel-body">
<!-- Bar chart-->
<div class="text-center">
<div data-bar-color="primary" data-height="30" data-bar-width="6" data-bar-spacing="6" class="inlinesparkline inline">5,3,4,6,5,9,4,4,10,5,9,6,4</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<!-- START widget-->
<div data-toggle="play-animation" data-play="fadeInDown" data-offset="0" data-delay="500" class="panel widget">
<div class="panel-body bg-warning">
<div class="row row-table row-flush">
<div class="col-xs-8">
<p class="mb0">Bounce Rate</p>
<h3 class="m0">50%</h3>
</div>
<div class="col-xs-4 text-center">
<em class="fa fa-users fa-2x"></em>
</div>
</div>
</div>
<div class="panel-body">
<!-- Bar chart-->
<div class="text-center">
<div data-bar-color="warning" data-height="30" data-bar-width="6" data-bar-spacing="6" class="inlinesparkline inline">10,30,40,70,50,90,70,50,90,40,40,60,40</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<!-- START widget-->
<div data-toggle="play-animation" data-play="fadeInDown" data-offset="0" data-delay="1000" class="panel widget">
<div class="panel-body bg-danger">
<div class="row row-table row-flush">
<div class="col-xs-8">
<p class="mb0">Searchs</p>
<h3 class="m0">28%</h3>
</div>
<div class="col-xs-4 text-center">
<em class="fa fa-search fa-2x"></em>
</div>
</div>
</div>
<div class="panel-body">
<!-- Bar chart-->
<div class="text-center">
<div data-bar-color="danger" data-height="30" data-bar-width="6" data-bar-spacing="6" class="inlinesparkline inline">2,7,5,9,4,2,7,5,7,5,9,6,4</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<!-- START widget-->
<div data-toggle="play-animation" data-play="fadeInDown" data-offset="0" data-delay="1500" class="panel widget">
<div class="panel-body bg-success">
<div class="row row-table row-flush">
<div class="col-xs-8">
<p class="mb0">Traffic</p>
<h3 class="m0">140.5 kb</h3>
</div>
<div class="col-xs-4 text-center">
<em class="fa fa-globe fa-2x"></em>
</div>
</div>
</div>
<div class="panel-body">
<!-- Bar chart-->
<div class="text-center">
<div data-bar-color="success" data-height="30" data-bar-width="6" data-bar-spacing="6" class="inlinesparkline inline">4,7,5,9,6,4,8,6,3,4,7,5,9</div>
</div>
</div>
</div>
</div>
</div>Skript:
/**=========================================================
* SparkLines Mini Charts
=========================================================*/
(function($, window, document){
var Selector = '.inlinesparkline';
//Match color with css values to style charts
var colors = {
primary: '#5fb5cb',
success: '#27ae60',
info: '#22bfe8',
warning: '#ffc61d',
danger: '#f6504d'
};
//Inline sparklines take their values from the contents of the tag
$(Selector).each(function() {
var $this = $(this);
var data = $this.data();
if(data.barColor && colors[data.barColor])
data.barColor = colors[data.barColor];
var options = data;
options.type = data.type || 'bar'; //default chart is bar
$(this).sparkline('html', options);
});
}(jQuery, window, document));
$(function () {
//Bar chart
(function () {
var Selector = ".chart-bar";
$(Selector).each(function() {
var source = $(this).data('source') || $.error('Bar: No source defined.');
var chart = new FlotChart(this, source),
panel = $(Selector).parents(".panel"),
option = {
series: {
bars: {
align: "center",
lineWidth: 0,
show: true,
barWidth: 0.6,
fill: 0.9
}
},
grid: {
borderColor: "#eee",
borderWidth: 1,
hoverable: true,
backgroundColor: "#fcfcfc"
},
tooltip: true,
tooltipOpts: {
content: "%x : %y"
},
xaxis: {
tickColor: "#fcfcfc",
mode: "categories"
},
yaxis: {
tickColor: "#eee"
},
shadowSize: 0
};
//Send Request
chart.requestData(option);
});
})();
//Bar Stacked chart
(function () {
var Selector = ".chart-bar-stacked";
$(Selector).each(function() {
var source = $(this).data('source') || $.error('Bar Stacked: No source defined.');
var chart = new FlotChart(this, source),
option = {
series: {
stack: true,
bars: {
align: "center",
lineWidth: 0,
show: true,
barWidth: 0.6,
fill: 0.9
}
},
grid: {
borderColor: "#eee",
borderWidth: 1,
hoverable: true,
backgroundColor: "#fcfcfc"
},
tooltip: true,
tooltipOpts: {
content: "%x : %y"
},
xaxis: {
tickColor: "#fcfcfc",
mode: "categories"
},
yaxis: {
tickColor: "#eee"
},
shadowSize: 0
};
//Send Request
chart.requestData(option);
});
})();
//Area chart
(function () {
var Selector = ".chart-area";
$(Selector).each(function() {
var source = $(this).data('source') || $.error('Area: No source defined.');
var chart = new FlotChart(this, source),
option = {
series: {
lines: {
show: true,
fill: 0.8
},
points: {
show: true,
radius: 4
}
},
grid: {
borderColor: "#eee",
borderWidth: 1,
hoverable: true,
backgroundColor: "#fcfcfc"
},
tooltip: true,
tooltipOpts: {
content: "%x : %y"
},
xaxis: {
tickColor: "#fcfcfc",
mode: "categories"
},
yaxis: {
tickColor: "#eee",
tickFormatter: function (v) {
return v + " visitors";
}
},
shadowSize: 0
};
//Send Request and Listen for refresh events
chart.requestData(option).listen();
});
})();
//Line chart
(function () {
var Selector = ".chart-line";
$(Selector).each(function() {
var source = $(this).data('source') || $.error('Line: No source defined.');
var chart = new FlotChart(this, source),
option = {
series: {
lines: {
show: true,
fill: 0.01
},
points: {
show: true,
radius: 4
}
},
grid: {
borderColor: "#eee",
borderWidth: 1,
hoverable: true,
backgroundColor: "#fcfcfc"
},
tooltip: true,
tooltipOpts: {
content: "%x : %y"
},
xaxis: {
tickColor: "#eee",
mode: "categories"
},
yaxis: {
tickColor: "#eee"
},
shadowSize: 0
};
//Send Request
chart.requestData(option);
});
})();
//Pïe
(function () {
var Selector = ".chart-pie";
$(Selector).each(function() {
var source = $(this).data('source') || $.error('Pie: No source defined.');
var chart = new FlotChart(this, source),
option = {
series: {
pie: {
show: true,
innerRadius: 0,
label: {
show: true,
radius: 0.8,
formatter: function (label, series) {
return '<div class="flot-pie-label">' +
//label + ' : ' +
Math.round(series.percent) +
'%</div>';
},
background: {
opacity: 0.8,
color: '#222'
}
}
}
}
};
//Send Request
chart.requestData(option);
});
})();
//Donut
(function () {
var Selector = ".chart-donut";
$(Selector).each(function() {
var source = $(this).data('source') || $.error('Donut: No source defined.');
var chart = new FlotChart(this, source),
option = {
series: {
pie: {
show: true,
innerRadius: 0.5 //This makes the donut shape
}
}
};
//Send Request
chart.requestData(option);
});
})();
});Verwendung dieser Bibliothek
<!-- Sparklines-->
<script src="vendor/sparklines/jquery.sparkline.min.js"></script>
<!-- Flot Charts-->
<script src="vendor/flot/jquery.flot.min.js"></script>
<script src="vendor/flot/jquery.flot.tooltip.min.js"></script>
<script src="vendor/flot/jquery.flot.resize.min.js"></script>
<script src="vendor/flot/jquery.flot.pie.min.js"></script>
<script src="vendor/flot/jquery.flot.time.min.js"></script>
<script src="vendor/flot/jquery.flot.categories.min.js"></script>
<!--[if lt IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
<!-- END Page Custom Script-->Ref:
http://omnipotent.net/jquery.sparkline/#s-about
In diesem moment, was soll ich tun?
- steht der container, die Sie für das Diagramm haben sowohl die Breite und Höhe?
- neben @Moogs Frage hinzufügen Sie javascript für plot-Diagramm
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich gerade angesichts dieser Fehler. Sie haben, um zu definieren,
div man-Füllung mit dem Diagramm. Ich habe dieses Beispiel
geladen und Daten zu
#placeholderdurch jQuery