開始使用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中文網其他相關文章！