我正在使用jqwidgets库显示一些条形图和折线图，它在chrome和edge浏览器中工作正常，但是在Firefox和safari中，它没有制作任何图表。
为什么它在Firefox和Safari中不起作用？
在我错的地方，jqwidgets图表示例在Firefox和Safari中也可以正常工作，但就我而言，它仅显示空白div。
$(document).ready(function () {
var data = [{"Value":"0.458","Label":"06-19-19"},{"Value":"0.895","Label":"06-20-19"},{"Value":"0.569","Label":"06-21-19"},{"Value":"0.5565","Label":"06-22-19"},{"Value":"0.5687","Label":"06-23-19"},{"Value":"0.14587","Label":"06-24-19"},{"Value":"0.1254","Label":"06-25-19"}];
var source = {
datatype: 'json',
localdata: data,
datafields: [
{
name: 'Date',
name: 'Volume'
}
]
};
var settingsColumn = {
title: { visible: false },
description: { visible: false },
showLegend: true,
enableAnimations: true,
borderLineColor: 'transparent',
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: data,
xAxis:
{
dataField: 'Label',
gridLines: { visible: false },
valuesOnTicks: false,
type: 'date',
baseUnit: 'day',
formatFunction: function (dateValue) {
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
//console.log(dateValue + '|' + months[dateValue.getMonth()]);
//console.log(dateValue);
// alert(dateValue.getYear());
var fdate = dateValue.getDate() + '-' + months[dateValue.getMonth()] + '-' + dateValue.getFullYear().toString().substr(-2);
return fdate;
},
},
colorScheme: 'scheme01',
columnSeriesOverlap: false,
seriesGroups:
[
{
type: 'column',
useGradient: false,
columnsGapPercent: 40,
seriesGapPercent: 100,
//indexLabel: "{y}",
valueAxis:
{
visible: false,
//baselineValue :0,
minValue: 0.0001,
unitInterval: .01,
title: { text: 'Volume(ML)<br>' }
},
series: [
{
dataField: 'Value', displayText: 'Volume(ML)', color: '#4B8CA8',
labels: {
visible: true, angle: '0',
verticalAlignment: 'top',
offset: { x: 0, y: 0 }
},
},
]
},
]
};
// setup the chart
$('#chartContainer').on("refreshEnd", function () { setTimeout(function () { setLegendsLabelPostion_Graph1(); }, 1000); });
$('#chartContainer').jqxChart(settingsColumn);
// var data1 = [{ Date: '20/05/2018', unit: '0.325' },
//{ Date: '21/05/2018', unit: '0.3251' },
//{ Date: '22/05/2018', unit: '0.4256' },
//{ Date: '23/05/2018', unit: '0.3252' },
//{ Date: '24/05/2018', unit: '0.4254' },
//{ Date: '25/05/2018', unit: '0.3250' },
//{ Date: '26/05/2018', unit: '0.5257' },
// ];
var data1 = [{"Value":"258.370","Label":"06-19-19"},{"Value":"294.074","Label":"06-20-19"},{"Value":"291.353","Label":"06-21-19"},{"Value":"291.638","Label":"06-22-19"},{"Value":"292.808","Label":"06-23-19"},{"Value":"292.613","Label":"06-24-19"},{"Value":"291.556","Label":"06-25-19"}];
var settingsLine = {
source: data1,
title: { visible: false },
description: { visible: false },
showLegend: true,
enableAnimations: true,
borderLineColor: 'transparent',
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
categoryAxis:
{
dataField: 'Label',
gridLines: { visible: false },
valuesOnTicks: false,
//labels: { angle:'90'}
type: 'date',
baseUnit: 'day',
formatFunction: function (dateValue) {
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
//console.log(dateValue + '|' + months[dateValue.getMonth()]);
// console.log(dateValue);
// alert(dateValue.getYear());
var fdate = dateValue.getDate() + '-' + months[dateValue.getMonth()] + '-' + dateValue.getFullYear().toString().substr(-2);
return fdate;
},
},
colorScheme: 'scheme05',
columnSeriesOverlap: false,
seriesGroups:
[
{
type: 'line',
showLabels: true,
valueAxis:
{
// unitInterval: 0.1,
// minValue: 0,
//maxValue: 10
gridLines: { visible: false },
visible: false
},
series: [
{
dataField: 'Value', displayText: 'kWh/ML', color: '#4B8CA8', symbolType: 'square',
labels:
{
visible: true, angle: '0',
verticalAlignment: 'top',
offset: { x: 0, y: -10 },
color: '#4B8CA8'
},
},
]
}
]
};
$('#chartContainer1').on("refreshEnd", function () { setTimeout(function () { setLegendsLabelPostion_Graph2(); }, 1000); });
$('#chartContainer1').jqxChart(settingsLine);
});
function setLegendsLabelPostion_Graph2() {
$.each($("#chartContainer1").find(".jqx-chart-label-text"), function (index, value) {
//alert( index + ": " + value );
// $(this).attr("y", "20");
});
}
function setLegendsLabelPostion_Graph1() {
// alert("hello2");
// alert($("#chartContainer1").find(".jqx-chart-label-text").length);
$.each($("#chartContainer").find(".jqx-chart-label-text"), function (index, value) {
//alert( index + ": " + value );
$(this).attr("y", "10");
});
}<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.light.css" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxchart.core.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Graphical View</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="col-12 header">
<div style="text-align:left; vertical-align:text-top;color:#fff; font-size:18px;">
<div class="col-6" style="float:left;">
<h1>Graphical reports</h1>
</div>
</div>
</div>
<div style="height:auto">
<div class="col-12 headerBg">
Daily Volume
</div>
<div id='chartContainer' style="width:100%; height:500px;">
</div>
<div class="col-12 headerBg">
Daily FLow
</div>
<div id="chartContainer1" style="width:100%; height:500px;">
</div>
</div>
</body>
</html>