JavaScript ArcGIS TimeSlider.tickConfigs用法及代碼示例

基本信息

以下是所在類或對象的基本信息。

AMD: require(["esri/widgets/TimeSlider"], (TimeSlider) => { /* code goes here */ });

ESM: import TimeSlider from "@arcgis/core/widgets/TimeSlider";

類： esri/widgets/TimeSlider

繼承: TimeSlider > Widget > Accessor

自從：用於 JavaScript 4.12 的 ArcGIS API

用法說明

TimeSlider.tickConfigs函數(或屬性)的定義如下：

tickConfigs TickConfig[]

自從：ArcGIS 適用於 JavaScript 4.16 的 API

設置後，覆蓋默認的 TimeSlider 刻度標簽係統。有關如何配置刻度位置、樣式和行為的詳細文檔，請參閱TickConfig。

默認值：null

例子：

// By default in "en-US" the TimeSlider will display ticks with "2010, 2011, 2012, etc".
// Overwrite TimeSlider tick configuration so that labels display "'10, '12, '14, etc" in red.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  fullTimeExtent: {
    start: new Date(2010, 0, 1),
    end: new Date(2020, 0, 1)
  },
  tickConfigs: [{
    mode: "position",
    values: [
      new Date(2010, 0, 1), new Date(2012, 0, 1), new Date(2014, 0, 1),
      new Date(2016, 0, 1), new Date(2018, 0, 1), new Date(2020, 0, 1)
    ].map((date) => date.getTime()),
    labelsVisible: true,
    labelFormatFunction: (value) => {
      const date = new Date(value);
      return `'${date.getUTCFullYear() - 2000}`;
    },
    tickCreatedFunction: (value, tickElement, labelElement) => {
      tickElement.classList.add("custom-ticks");
      labelElement.classList.add("custom-labels");
    }
  }]
};

// this CSS goes with the snippet above.
#timeSlider .custom-ticks {
  background-color: red;
  width: 1px;
  height: 8px;
}
#timeSlider .custom-labels {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 15px;
  color: red;
}

相關用法

注：本文由純淨天空篩選整理自arcgis.com大神的英文原創作品 TimeSlider.tickConfigs。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。