创建Chart.js折线图时,所有功能都可以在桌面上正常运行。但是,在iOS(iPad,iPhone等)上查看时,折线图中未显示数据线。
此处查看实时示例:https://jsfiddle.net/9pcuvthy/。它使用的是Chart.js捆绑的2.9.3版本。
您可以在iOS上查看它,也可以使用https://www.browserstack.com/查看实际存在的问题。在所有iOS移动浏览器(Chrome,Firefox和Safari)上都会发生此行为。
我如何使这些行在iOS上显示?
/* Build the chart arrays */
var lineDataPaid = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var lineDataSEO = [0, 2, 5, 8, 12, 19, 31, 47, 67, 100];
/* Build the chart */
var ctx = document.getElementById("ROIchart").getContext("2d");
var monthLabels = [];
var dateObj = new Date();
dateObj.setDate(1);
var dateYear = dateObj.getFullYear();
var monthYearArray = [];
monthYearArray[0] = "January";
monthYearArray[1] = "February";
monthYearArray[2] = "March";
monthYearArray[3] = "April";
monthYearArray[4] = "May";
monthYearArray[5] = "June";
monthYearArray[6] = "July";
monthYearArray[7] = "August";
monthYearArray[8] = "September";
monthYearArray[9] = "October";
monthYearArray[10] = "November";
monthYearArray[11] = "December";
var dateYearLoop = dateYear;
for (i = 0; i < lineDataSEO.length; i++) {
if (dateObj.getMonth() == 11) {
monthLabels[i] = monthYearArray[dateObj.getMonth()] + " " + dateYearLoop;
dateYearLoop = dateYearLoop + 1;
dateObj.setMonth(dateObj.getMonth() + 1);
} else {
monthLabels[i] = monthYearArray[dateObj.getMonth()] + " " + dateYearLoop;
dateObj.setMonth(dateObj.getMonth() + 1);
}
}
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: monthLabels,
datasets: [{
label: "Paid Leads / Traffic",
backgroundColor: "rgba(255, 98, 132, 0.5)",
borderColor: "rgb(255, 98, 132)",
data: lineDataPaid,
fill: false,
}, {
label: "SEO and Content",
backgroundColor: "rgba(46, 57, 191, 0.5)",
borderColor: "rgb(46, 57, 191)",
data: lineDataSEO,
fill: true,
}]
},
// Configuration options go here
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var text = tooltipItems.datasetIndex === 0 ? ' paid leads for $500' : ' SEO leads for $500';
return tooltipItems.yLabel + text;
}
}
},
legend: {
labels: {
fontSize: 14
}
},
responsive: true,
aspectRatio: 1,
//maintainAspectRatio: false,
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time',
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
ticks: {
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
type: "time",
time: {
unit: "month",
displayFormats: {
month: 'MMM YYYY'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Leads',
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
ticks: {
beginAtZero: true,
max: 100,
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
}
}]
}
}
});
.chart-container {
position: relative;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<div class="chart-container">
<canvas id="ROIchart"></canvas>
</div>
我想通了,这要感谢代码示例中显示的警告。
问题是我传递的日期不是ISO标准格式,因此moments()默认为不适用于所有浏览器的标准date()。
我改变了格式,现在可以正常工作。
/* Build the chart arrays */
var lineDataPaid = [10, 10, 10, 10, 10, 10, 10, 10, 10, 10];
var lineDataSEO = [0, 2, 5, 8, 12, 19, 31, 47, 67, 100];
/* Build the chart */
var ctx = document.getElementById("ROIchart").getContext("2d");
var monthLabels = [];
var dateObj = new Date();
dateObj.setDate(1);
var dateYear = dateObj.getFullYear();
var monthYearArray = [];
monthYearArray[0] = "01";
monthYearArray[1] = "02";
monthYearArray[2] = "03";
monthYearArray[3] = "04";
monthYearArray[4] = "05";
monthYearArray[5] = "06";
monthYearArray[6] = "07";
monthYearArray[7] = "08";
monthYearArray[8] = "09";
monthYearArray[9] = "10";
monthYearArray[10] = "11";
monthYearArray[11] = "12";
var dateYearLoop = dateYear;
for (i = 0; i < lineDataSEO.length; i++) {
if (dateObj.getMonth() == 11) {
monthLabels[i] = dateYearLoop + "-" + monthYearArray[dateObj.getMonth()];
dateYearLoop = dateYearLoop + 1;
dateObj.setMonth(dateObj.getMonth() + 1);
} else {
monthLabels[i] = dateYearLoop + "-" + monthYearArray[dateObj.getMonth()];
dateObj.setMonth(dateObj.getMonth() + 1);
}
}
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: monthLabels,
datasets: [{
label: "Paid Leads / Traffic",
backgroundColor: "rgba(255, 98, 132, 0.5)",
borderColor: "rgb(255, 98, 132)",
data: lineDataPaid,
fill: false,
}, {
label: "SEO and Content",
backgroundColor: "rgba(46, 57, 191, 0.5)",
borderColor: "rgb(46, 57, 191)",
data: lineDataSEO,
fill: true,
}]
},
// Configuration options go here
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
var text = tooltipItems.datasetIndex === 0 ? ' paid leads for $500' : ' SEO leads for $500';
return tooltipItems.yLabel + text;
}
}
},
legend: {
labels: {
fontSize: 14
}
},
responsive: true,
aspectRatio: 1,
//maintainAspectRatio: false,
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time',
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
ticks: {
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
type: "time",
time: {
unit: "month",
displayFormats: {
month: 'MMM YYYY'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Leads',
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
},
ticks: {
beginAtZero: true,
max: 100,
fontFamily: 'Open Sans',
fontColor: 'rgb(29, 29, 31)',
fontSize: '14'
}
}]
}
}
});
.chart-container {
position: relative;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<div class="chart-container">
<canvas id="ROIchart"></canvas>
</div>