定制

初始图表选项

创建图表时，可以设置图表的多数配置，之后可以通过applyOptions 动态修改配置。

大小

首先，创建图表时应设置首选图表大小:

const chart = createChart(document.body, {
    width: 600,
    height: 380,
  },
});

如果要在调整网页大小时调整图表大小，请使用resize功能设置图表的宽度和高度:

chart.resize(250, 150);

本地化

使用localization选项，您可以设置语音、日期和时间格式。

Locale

默认情况下，库使用浏览器语言设置。 因此，显示的日期和时间格式可以根据用户所在的区域而不同。 要为所有用户设置相同的语言设置，请使用localization选项的locale属性：

const chart = createChart(document.body, {
  localization: {
    locale: "ja-JP"
  }
});

使用 applyOptions 方法，您可以在创建图表后动态更改区域设置:

chart.applyOptions({
  localization: {
    locale: "en-US"
  }
});

日期格式

可以使用localization选项的dateFormat属性设置首选日期格式。 可以使用的日期格式：:

• dd MMM 'yy - 25 Jun '18 (默认)
• yyyy-MM-dd - 2018-06-25
• yy-MM-dd - 18-06-25
• yy/MM/dd - 18/06/25
• yyyy/MM/dd - 2018/06/25
• dd-MM-yyyy - 25-06-2018
• dd-MM-yy - 25-06-18
• dd/MM/yy - 25/06/18
• dd/MM/yyyy - 25/06/2018
• MM/dd/yy - 06/25/18
• MM/dd/yyyy - 06/25/2018

const chart = createChart(document.body, {
  localization: {
    dateFormat: "yyyy/MM/dd"
  }
});

时间格式

timeFormatter 方法可以自定义垂直十字线下方的时间轴上显示的时间戳格式。 目前，无法更改时间刻度标签本身的时间格式，但此方法机会在未来使用。

const chart = createChart(document.body, {
  localization: {
    timeFormatter: function() {
      return "Custom time format";
    }
  }
});

价格刻度

价格刻度是垂直坐标使用的价格数据值。

价格刻度有 4 种数据显示模式:

• Normal
• Logarithmic
• Percentage
• Indexed to 100

刻度本身可以位于系列的右侧/左侧。 如果您不希望它在图表上可见，请使用position：none。

以下为价格刻度可配置项:

价格刻度定制的例子

chart.applyOptions({
  priceScale: {
    position: "left",
    mode: 2,
    autoScale: false,
    invertScale: true,
    alignLabels: false,
    borderVisible: false,
    borderColor: "#555ffd",
    scaleMargins: {
      top: 0.3,
      bottom: 0.25
    }
  }
});

时间刻度

时间刻度是横向坐标使用的时间数据值。

时间刻度选项可以在缩放和调整图表大小时调整图表上显示的系列。

如果需要，可以隐藏时间刻度。

以下为时间刻度可配置项:

时间刻度定制的例子

chart.applyOptions({
  timeScale: {
    rightOffset: 12,
    barSpacing: 3,
    fixLeftEdge: true,
    lockVisibleTimeRangeOnResize: true,
    rightBarStaysOnScroll: true,
    borderVisible: false,
    borderColor: "#fff000",
    visible: true,
    timeVisible: true,
    secondsVisible: false
  }
});

十字线

十字准线显示图表上任何悬停点的价格轴和时间轴值的交集。

它由水平和垂直线表示。 如果需要，可以通过设置color，width和style或者使用visible选项来禁用它们中的每一个。 请注意，禁用十字准线不会禁用线和面积系列上的十字准线标记。 可以使用相关系列的crosshairMarkerVisible选项禁用它。

十字准线的垂直和水平线在价格和时间轴上的所有标记。 都可以被禁用。

Crosshair 有两种移动模式:

• Magnet 模式，默认情况下启用的模式，将十字线的水平线吸到到价格线、或 k 线的收盘价上。
• Normal 模式,让十字准线在图表中自由移动。

请注意，十字线必须单独定制。

以下为十字线可配置项:

十字线定制的例子

chart.applyOptions({
  crosshair: {
    vertLine: {
      color: "#6A5ACD",
      width: 0.5,
      style: 1,
      visible: true,
      labelVisible: false
    },
    horzLine: {
      color: "#6A5ACD",
      width: 0.5,
      style: 0,
      visible: true,
      labelVisible: true
    },
    mode: 1
  }
});

网格

通过在价格和时间轴的可见标记的水平处绘制的垂直和水平线，在图表背景中表示 网格。 可以为 网格线设置自定义color和style，或者在必要时禁用它们的可见性。 请注意，网格的垂直和水平线必须单独定制。

以下为网格可配置项：

网格定制的例子

chart.applyOptions({
  grid: {
    vertLines: {
      color: "rgba(70, 130, 180, 0.5)",
      style: 1,
      visible: true
    },
    horzLines: {
      color: "rgba(70, 130, 180, 0.5)",
      style: 1,
      visible: true
    }
  }
});

水印

水印是背景标签，其包括所绘制数据的简要描述。可以添加任何文本。 默认情况下禁用水印显示。 请确保启用它并设置适当的字体颜色和大小，以使水印在图表的背景中可见。 我们建议使用半透明颜色和大字体。 另请注意，水印位置可以垂直和水平对齐。

以下为水印可配置项:

水印定制的例子

chart.applyOptions({
  watermark: {
    color: "rgba(11, 94, 29, 0.4)",
    visible: true,
    text: "TradingView Watermark Example",
    fontSize: 24,
    horzAlign: "left",
    vertAlign: "bottom"
  }
});

图表布局选项

以下选项可用于自定义图表设计:

布局自定义的例子

chart.applyOptions({
  layout: {
    backgroundColor: "#FAEBD7",
    textColor: "#696969",
    fontSize: 12,
    fontFamily: "Calibri"
  }
});

滚动和缩放选项

默认情况下，系列和刻度的滚动和缩放模式处于启用状态。 您可以使用handleScroll和handleScale选项禁用它们中的任何一个。

滚动选项

缩放选项

滚动/缩放自定义的例子

chart.applyOptions({
  handleScroll: {
    mouseWheel: true,
    pressedMouseMove: true
  },
  handleScale: {
    axisPressedMouseMove: true,
    mouseWheel: true,
    pinch: true
  }
});