Question

我在工作中的项目中使用ChartJS，在这里我尝试从一个或多个系列数据和某些选项（图表类型，标题，x和y的值类型等）生成图表。当我在数据上有多个数据集时，除了scatter类型之外，其他一切都进行得很顺利。

var ctx = $('#myChart');

var chart = new Chart (ctx,{
type: "scatter",
		data: {
			"datasets":[
				{
					label:"Series #1",
					fill:false,
					borderColor:"rgba(0,137,176,0.4)",
					backgroundColor:"rgba(0,137,176,0.1)",
					pointBorderColor:"rgba(0,137,176,0.7)",
					pointBackgroundColor:"rgba(0,137,176,0.5)",
					data:[
						{"x":"alpha","y":36.2},
						{"x":"beta","y":36.9},
						{"x":"gamma","y":37},
						{"x":"delta","y":38.3},
						{"x":"epsilon","y":37.9},
						{"x":"zeta","y":37.2}
					]
				}, {
					label:"Series #2",
					fill:false,
					borderColor:"rgba(19,237,150,0.4)",
					backgroundColor:"rgba(19,237,150,0.1)",
					pointBorderColor:"rgba(19,237,150,0.7)",
					pointBackgroundColor:"rgba(19,237,150,0.5)",
					data:[
						{"x":"alpha","y":37.4},
						{"x":"beta","y":37.1},
						{"x":"gamma","y":36.5},
						{"x":"delta","y":36.4},
						{"x":"epsilon","y":36.4},
						{"x":"zeta","y":36.5}
					]
				}, {
					label:"Series #3",
					fill:false,
					borderColor:"rgba(248,231,28,0.4)",
					backgroundColor:"rgba(248,231,28,0.1)",
					pointBorderColor:"rgba(248,231,28,0.7)",
					pointBackgroundColor:"rgba(248,231,28,0.5)",
					data:[
						{"x":"alpha","y":38.1},
						{"x":"beta","y":38.4},
						{"x":"gamma","y":39},
						{"x":"delta","y":39.2},
						{"x":"epsilon","y":38.1},
						{"x":"zeta","y":37.4}
					]
				}],
				"labels":["alpha","beta","gamma","delta","epsilon","zeta"]},
		options: {
			elements: { line: { tension: 0 } },
			scales: {
				xAxes: [
					{
						scaleLabel:{
							display:true,
							labelString:"Date"
						},
						bounds:"data",
						type:"category"
					},{
						display:false
						},{
						display:false
					}
				],
				yAxes:[
					{
						scaleLabel: {
							display:true,
							labelString:"Temperature (°C)"
						},
						bounds:"data",
						ticks:{
							min:35.9,
							max:39.5,
							autoSkip:false,
							stepSize:0.6
						}
					}, {
						display:false
					}, {
						display:false
					}
				]
			},
			},
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<canvas id="myChart"></canvas>

</body>
</html>

您可以很容易地注意到，在我的图形中没有网格，没有xAxes定义，没有yAxes定义。而且我不知道为什么。

所以，这是我的问题：为什么散点图不显示网格和轴？

我再给出两个提示：

1-如果您使用摘要将图表类型从scatter更改为line，则一切正常。

2-奇怪的xAxes结构是自动生成的，因为三个传递的数据集使用所有相同的类别。我的代码从第一个数据集创建了第一个xAxes，并为其他数据集创建了一个简单的对象{ display: false }（chart.options.scales.xAxes必须是与数据集大小相同的数组）。

我一直认为自己是新手，所以任何建议（关于这个问题，也包括我的解决方法）都非常受欢迎。

Answer 1

如果删除{ display: false }，则可以看到网格线。不知道您是否需要这个？

如果确实需要此功能，则可以随时检查if (type === 'line')，如果需要，可以将{ display: false }添加到选项中。

var ctx = $('#myChart');

var chart = new Chart (ctx,{
type: "scatter",
		data: {
			"datasets":[
				{
					label:"Series #1",
					fill:false,
					borderColor:"rgba(0,137,176,0.4)",
					backgroundColor:"rgba(0,137,176,0.1)",
					pointBorderColor:"rgba(0,137,176,0.7)",
					pointBackgroundColor:"rgba(0,137,176,0.5)",
					data:[
						{"x":"alpha","y":36.2},
						{"x":"beta","y":36.9},
						{"x":"gamma","y":37},
						{"x":"delta","y":38.3},
						{"x":"epsilon","y":37.9},
						{"x":"zeta","y":37.2}
					]
				}, {
					label:"Series #2",
					fill:false,
					borderColor:"rgba(19,237,150,0.4)",
					backgroundColor:"rgba(19,237,150,0.1)",
					pointBorderColor:"rgba(19,237,150,0.7)",
					pointBackgroundColor:"rgba(19,237,150,0.5)",
					data:[
						{"x":"alpha","y":37.4},
						{"x":"beta","y":37.1},
						{"x":"gamma","y":36.5},
						{"x":"delta","y":36.4},
						{"x":"epsilon","y":36.4},
						{"x":"zeta","y":36.5}
					]
				}, {
					label:"Series #3",
					fill:false,
					borderColor:"rgba(248,231,28,0.4)",
					backgroundColor:"rgba(248,231,28,0.1)",
					pointBorderColor:"rgba(248,231,28,0.7)",
					pointBackgroundColor:"rgba(248,231,28,0.5)",
					data:[
						{"x":"alpha","y":38.1},
						{"x":"beta","y":38.4},
						{"x":"gamma","y":39},
						{"x":"delta","y":39.2},
						{"x":"epsilon","y":38.1},
						{"x":"zeta","y":37.4}
					]
				}],
				"labels":["alpha","beta","gamma","delta","epsilon","zeta"]},
		options: {
			elements: { line: { tension: 0 } },
			scales: {
				xAxes: [
					{
						scaleLabel:{
							display:true,
							labelString:"Date"
						},
						bounds:"data",
						type:"category",
					}
				],
				yAxes:[
					{
						scaleLabel: {
							display:true,
							labelString:"Temperature (°C)"
						},
						bounds:"data",
						ticks:{
							min:35.9,
							max:39.5,
							autoSkip:false,
							stepSize:0.6
						}
					}
				]
			},
			},
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<canvas id="myChart"></canvas>

</body>
</html>

为什么散点图不显示轴？

1 个答案: