前四篇教程中，你已經(jīng)學(xué)習(xí)了大量關(guān)于Chart.js的知識(shí)。閱讀完前四篇教程后，你應(yīng)該能夠自定義工具提示和標(biāo)簽、更改字體以及創(chuàng)建不同類型的圖表。本系列教程尚未介紹Chart.js的一個(gè)方面：坐標(biāo)軸和刻度。

自庫(kù)的v1.0版本以來(lái)，刻度發(fā)生了很大變化，現(xiàn)在功能更加強(qiáng)大。在本教程中，你將學(xué)習(xí)如何操作刻度并使用庫(kù)提供的不同選項(xiàng)來(lái)控制其外觀。

更改網(wǎng)格線和坐標(biāo)軸標(biāo)簽

網(wǎng)格線的所有配置選項(xiàng)都嵌套在標(biāo)題和字體鍵的scale選項(xiàng)下。

以下是用一組不同的圖表選項(xiàng)指定的相同舊的汽車速度圖表。

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"
        }
      }
    }
  }
};

還有一個(gè)名為grid的鍵。當(dāng)設(shè)置為font鍵時(shí)。

你還可以使用單位設(shè)置為minute的最小值和最大值來(lái)設(shè)置刻度的最小值和最大值?？梢允褂?code>displayFormats鍵指定時(shí)間在刻度中顯示的格式。

你還可以使用round鍵在將時(shí)間繪制到圖表上之前對(duì)其進(jìn)行舍入。設(shè)置round的值時(shí)要小心。假設(shè)你將其值設(shè)置為hour，并且需要在圖表上繪制兩個(gè)時(shí)間。如果一個(gè)時(shí)間是上午5:30，另一個(gè)時(shí)間是上午5:50，它們都將繪制在上午5:00的刻度標(biāo)記上。將其值設(shè)置為minute將分別在5:30和5:50標(biāo)記上繪制它們。

可以使用以下代碼使用時(shí)間刻度繪制教程開(kāi)頭繪制的折線圖。

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
        }
      }
    }
  }
};

總結(jié)

本教程幫助你了解Chart.js中不同類型的刻度。你現(xiàn)在可以通過(guò)控制刻度的顏色、最小值和最大值、刻度數(shù)以及其他此類因素來(lái)輕松自定義圖表中的刻度。

閱讀本系列中的所有五個(gè)教程后，你應(yīng)該能夠創(chuàng)建Chart.js中提供的所有類型的圖表。我希望你喜歡本教程和本系列。

如果你正在尋找其他學(xué)習(xí)資源或在工作中使用的資源，請(qǐng)查看我們?cè)贓nvato市場(chǎng)上提供的資源。

以上是開(kāi)始使用Chart.js：軸和尺度的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！