时间戳

首页 > 解决方案 > Chart.js 散点轴标题

javascript - Chart.js 散点轴标题

问题描述

我想在我的散点图上添加 x 和 y 轴标题，如下所示 ：

我阅读了关于 chartJS 的文档，但我尝试的一切都没有奏效。

任何帮助将不胜感激。

代码：

  let healthy = healRBP.map((v, i) => ({ x: v, y: healChol[i] }))
  let cardio = cardioRBP.map((v, i) => ({ x: v, y: cardioChol[i] }))

// Get variables passed from Flask.
  let patientX = [{{ rbp }}]
  let patientY = [{{ chol }}]

  let patient = patientX.map((v, i) => ({ x: v, y: patientY[i] }))
  var ctx2 = document.getElementById("scatterChart").getContext("2d");
  var scatterChart = new Chart(ctx2, {
    type: 'scatter',
    data: {
      datasets: [{
        label: 'Healthy',
        pointBackgroundColor: "rgb(0, 255, 0, 0.3)",
        borderColor: "rgb(0, 255, 0)",
        data: healthy,
      }, {
        label: 'Cardio',
        pointBackgroundColor: "rgb(255, 0, 0, 0.3)",
        borderColor: "rgb(255, 0, 0)",
        data: cardio,
      }, {
        label: 'Patient',
        pointBackgroundColor: "rgb(0, 0, 255)",
        borderColor: "rgb(0, 0, 255)",
        data: patient,
        pointRadius: 10,
        pointHoverRadius: 12
      }],
      options: {},
    }
  });

我的图表现在的样子： 我的图表

标签： javascriptchart.js

解决方案

您可以通过配置选项对象的比例部分来在轴上放置标签，如下所示： scales:{ y:{ scaleLabel:{ display:true, labelString: "test" } } },

如果您使用的是 V2，则必须将对象放在一个名为 yAxes for y 和 xAxes for x 的数组中。

V3 文档：https ://www.chartjs.org/docs/master/axes/labelling

V2 文档：https ://www.chartjs.org/docs/latest/axes/labelling.html

推荐阅读