Chart.js折线图未在iOS上呈现数据线

问题描述 投票:0回答:1

创建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>
javascript chart.js
1个回答
0
投票

我想通了,这要感谢代码示例中显示的警告。

问题是我传递的日期不是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>
© www.soinside.com 2019 - 2024. All rights reserved.