散点图不显示任何 chartjs 需要一些调试

Question

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  "type": "scatter",
  "data": {
    "datasets": [
      {
        "label": "EARRINGS",
        "data": [
          {
            "x": 13,
            "y": "19-07-2021"
          },
          {
            "x": 5,
            "y": "12-08-2021"
          }
        ],
        "showLine": true,
        "fill": false,
        "borderColor": "rgb(125,60,122)"
      },
      {
        "label": "RINGS",
        "data": [
          {
            "x": 4,
            "y": "09-08-2021"
          },
          {
            "x": 1,
            "y": "06-08-2021"
          },
          {
            "x": 9,
            "y": "12-08-2021"
          }
        ],
        "showLine": true,
        "fill": false,
        "borderColor": "rgb(125,60,122)"
      },
      {
        "label": "BANGLES",
        "data": [
          {
            "x": 2,
            "y": "06-08-2021"
          },
          {
            "x": 1,
            "y": "12-08-2021"
          }
        ],
        "showLine": true,
        "fill": false,
        "borderColor": "rgb(125,60,122)"
      },
      {
        "label": "NECKLACES",
        "data": [
          {
            "x": 1,
            "y": "12-08-2021"
          }
        ],
        "showLine": true,
        "fill": false,
        "borderColor": "rgb(125,60,122)"
      }
    ]
  },
  "options": {
    "scales": {
      "x": {
        "title": {
          "display": true,
          "text": "Date"
        },
        "ticks": {
          "precision": 0,
          "maxTicksLimit": 9
        }
      },
      "y": {
        "title": {
          "display": true,
          "text": "No of Trials"
        },
        "ticks": {
          "precision": 0
        }
      }
    }
  }
});

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

Answer 1

2 件事，不要使用过时版本的库，因为你的配置将无法工作，默认情况下 y 比例是线性比例，所以如果你想使用字符串，你需要将其指定为类别比例

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  "type": "scatter",
  "data": {
    "datasets": [
      {
        "label": "EARRINGS",
        "data": [
          {
            "x": 13,
            "y": "19-07-2021"
          },
          {
            "x": 5,
            "y": "12-08-2021"
          }
        ],
        "showLine": true,
        "fill": false,
        "borderColor": "rgb(125,60,122)"
      },
      {
        "label": "RINGS",
        "data": [
          {
            "x": 4,
            "y": "09-08-2021"
          },
          {
            "x": 1,
            "y": "06-08-2021"
          },
          {
            "x": 9,
            "y": "12-08-2021"
          }
        ],
        "showLine": true,
        "fill": false,
        "borderColor": "rgb(125,60,122)"
      },
      {
        "label": "BANGLES",
        "data": [
          {
            "x": 2,
            "y": "06-08-2021"
          },
          {
            "x": 1,
            "y": "12-08-2021"
          }
        ],
        "showLine": true,
        "fill": false,
        "borderColor": "rgb(125,60,122)"
      },
      {
        "label": "NECKLACES",
        "data": [
          {
            "x": 1,
            "y": "12-08-2021"
          }
        ],
        "showLine": true,
        "fill": false,
        "borderColor": "rgb(125,60,122)"
      }
    ]
  },
  "options": {
    "scales": {
      "x": {
        "title": {
          "display": true,
          "text": "Date"
        },
        "ticks": {
          "precision": 0,
          "maxTicksLimit": 9
        }
      },
      "y": {
        type: 'category',
        "title": {
          "display": true,
          "text": "No of Trials"
        },
        "ticks": {
          "precision": 0
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<canvas id="myChart"></canvas>

散点图不显示任何 chartjs 需要一些调试

Scatter plot not showing anything chartjs needs some debugging

html

javascript

chart.js