开始使用Chart.js：轴和尺度

前四篇教程中，你已经学习了大量关于Chart.js的知识。阅读完前四篇教程后，你应该能够自定义工具提示和标签、更改字体以及创建不同类型的图表。本系列教程尚未介绍Chart.js的一个方面：坐标轴和刻度。

自库的v1.0版本以来，刻度发生了很大变化，现在功能更加强大。在本教程中，你将学习如何操作刻度并使用库提供的不同选项来控制其外观。

更改网格线和坐标轴标签

网格线的所有配置选项都嵌套在标题和字体键的scale选项下。

以下是用一组不同的图表选项指定的相同旧的汽车速度图表。

var chartOptions = {
  plugins: {
    legend: {
      display: true,
      position: 'top',
      labels: {
        boxWidth: 50,
        usePointStyle: true,
        pointStyle: "line"
      }
    }
  },
  scales: {
    x: {
      grid: {
        display: false
      },
      title: {
        display: true,
        text: "Time in Seconds",
        color: "red",
        font: {
          size: 24,
          weight: "bold"
        }
      }
    },
    y: {
      grid: {
        color: "#ccc",
        borderDash: [20, 4],
        borderColor: "black",
        tickColor: "black"
      },
      title: {
        display: true,
        text: "Speed in Miles per Hour",
        color: "green",
        font: {
          size: 18,
          weight: "bold"
        }
      }
    }
  }
};

还有一个名为grid的键。当设置为font键时。

你还可以使用单位设置为minute的最小值和最大值来设置刻度的最小值和最大值。可以使用displayFormats键指定时间在刻度中显示的格式。

你还可以使用round键在将时间绘制到图表上之前对其进行舍入。设置round的值时要小心。假设你将其值设置为hour，并且需要在图表上绘制两个时间。如果一个时间是上午5:30，另一个时间是上午5:50，它们都将绘制在上午5:00的刻度标记上。将其值设置为minute将分别在5:30和5:50标记上绘制它们。

可以使用以下代码使用时间刻度绘制教程开头绘制的折线图。

var chartOptions = {
  plugins: {
    legend: {
      position: "top",
      labels: {
        boxWidth: 50,
        usePointStyle: true,
        pointStyle: "line",
      }
    }
  },
  scales: {
    x: {
      type: "time",
      grid: {
        tickColor: "green",
        borderDash: [5, 2],
        tickWidth: 2,
        color: "black",
        borderColor: "black",
      },
      time: {
        unit: "minute",
        stepSize: 30,
        tooltipFormat: "hh:mm a",
        displayFormats: {
          "minute": "hh:mm a"
        }
      },
      ticks: {
        color: "green",
        font: {
          weight: "bold"
        }
      },
      title: {
        display: true,
        text: "Time",
        font: {
          weight: "bold",
          size: 22
        }
      }
    },
    y: {
      grid: {
        color: "black",
        borderDash: [5, 2,],
        borderColor: "black",
        tickColor: "red",
        tickWidth: 2,
      },
      ticks: {
        color: "red",
        font: {
          weight: "bold"
        }
      },
      title: {
        display: true,
        text: "Speed (in mph)",
        font: {
          weight: "bold",
          size: 22
        }
      }
    }
  }
};

总结

本教程帮助你了解Chart.js中不同类型的刻度。你现在可以通过控制刻度的颜色、最小值和最大值、刻度数以及其他此类因素来轻松自定义图表中的刻度。

阅读本系列中的所有五个教程后，你应该能够创建Chart.js中提供的所有类型的图表。我希望你喜欢本教程和本系列。

如果你正在寻找其他学习资源或在工作中使用的资源，请查看我们在Envato市场上提供的资源。

以上是开始使用Chart.js：轴和尺度的详细内容。更多信息请关注PHP中文网其他相关文章！