为什么散点图不显示坐标轴？

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，并为其他数据集创建一个简单的 object { 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>

为什么散点图不显示坐标轴？

Why scatter chart does not show axes?

javascript

chart.js

chart.js2