定制

初始图表选项

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

大小

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

  1. const chart = createChart(document.body, {
  2. width: 600,
  3. height: 380,
  4. },
  5. });

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

  1. chart.resize(250, 150);

本地化

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

Locale

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

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

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

  1. chart.applyOptions({
  2. localization: {
  3. locale: "en-US"
  4. }
  5. });

日期格式

可以使用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
  1. const chart = createChart(document.body, {
  2. localization: {
  3. dateFormat: "yyyy/MM/dd"
  4. }
  5. });

时间格式

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

  1. const chart = createChart(document.body, {
  2. localization: {
  3. timeFormatter: function() {
  4. return "Custom time format";
  5. }
  6. }
  7. });

价格刻度

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

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

  • Normal
  • Logarithmic
  • Percentage
  • Indexed to 100 刻度本身可以位于系列的右侧/左侧。 如果您不希望它在图表上可见,请使用position:none

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

名称类型默认值描述
positionleft | right | noneright设置价格刻度显示的位置
mode价格刻度模式PriceScaleMode.Normal设置价格刻度的模式
autoScalebooleantrue如果为 true,则将系列数据缩放为图表大小
invertScalebooleanfalse如果为 true,在图表系列将垂直显示,一次增长趋势显示为下降趋势,反之亦然
alignLabelsbooleantrue如果为 true,则带有价格数据的标签不会重叠
borderVisiblebooleantrue如果为 true,则可以看到价格刻度的边框
borderColorstring#2b2b43价格刻度的边框颜色
scaleMargins{ bottom, top }{ bottom: 0.1, top: 0.2 }设置顶部和底部图表边框的系列边距(百分比)
entireTextOnlybooleanfalse如果为 false,即使它们部分不可见,也会显示顶角和底角标签

价格刻度定制的例子

  1. chart.applyOptions({
  2. priceScale: {
  3. position: "left",
  4. mode: 2,
  5. autoScale: false,
  6. invertScale: true,
  7. alignLabels: false,
  8. borderVisible: false,
  9. borderColor: "#555ffd",
  10. scaleMargins: {
  11. top: 0.3,
  12. bottom: 0.25
  13. }
  14. }
  15. });

时间刻度

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

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

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

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

名称类型默认值描述
rightOffsetnumber0设置 k 线的右侧边距宽度
barSpacingnumber6以像素为单位设置 K 线之间的间距
fixLeftEdgebooleanfalse如果为 true,则阻止滚动到第一个 K 线的左侧
lockVisibleTimeRangeOnResizebooleanfalse如果为 true,则在图表大小调整期间阻止更改可见时间区域
rightBarStaysOnScrollbooleanfalse如果为 false,则滚动时与悬停的 k 线保持在同一位置
borderVisiblebooleantrue如果为 true,则可以看到时间刻度边框
borderColorstring#2b2b43时间刻度的边框颜色
visiblebooleantrue如果为 true,则时间刻度显示在图表上
timeVisiblebooleanfalse如果为 true,则时间刻度和十字准线垂直标签上显示时间
secondsVisiblebooleantrue如果为 true,则在日内间隔以hh:mm:ss格式的时间显示在十字准线垂直线的标签上

时间刻度定制的例子

  1. chart.applyOptions({
  2. timeScale: {
  3. rightOffset: 12,
  4. barSpacing: 3,
  5. fixLeftEdge: true,
  6. lockVisibleTimeRangeOnResize: true,
  7. rightBarStaysOnScroll: true,
  8. borderVisible: false,
  9. borderColor: "#fff000",
  10. visible: true,
  11. timeVisible: true,
  12. secondsVisible: false
  13. }
  14. });

十字线

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

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

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

Crosshair 有两种移动模式:

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

以下为十字线可配置项:

名称类型默认值描述
colorstring#758696十字线颜色
widthnumber1十字线宽度,以像素为单位
styleLineStyleLineStyle.Dashed十字线样式
visiblebooleantrue如果为 true,则在图表上显示十字线
labelVisiblebooleantrue如果为 true,则显示数据标签在相关刻度上
labelBackgroundColorstring#4c525e十字准线标签背景颜色
modeCrosshairModeCrosshairMode.Magnet设置十字线移动的模式。

十字线定制的例子

  1. chart.applyOptions({
  2. crosshair: {
  3. vertLine: {
  4. color: "#6A5ACD",
  5. width: 0.5,
  6. style: 1,
  7. visible: true,
  8. labelVisible: false
  9. },
  10. horzLine: {
  11. color: "#6A5ACD",
  12. width: 0.5,
  13. style: 0,
  14. visible: true,
  15. labelVisible: true
  16. },
  17. mode: 1
  18. }
  19. });

网格

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

以下为网格可配置项:

名称类型默认值描述
colorstring#d6dcde网格线颜色
styleLineStyleLineStyle.Solid网格线样式
visiblebooleantrue如果为 true,则网格线将显示在图表上

网格定制的例子

  1. chart.applyOptions({
  2. grid: {
  3. vertLines: {
  4. color: "rgba(70, 130, 180, 0.5)",
  5. style: 1,
  6. visible: true
  7. },
  8. horzLines: {
  9. color: "rgba(70, 130, 180, 0.5)",
  10. style: 1,
  11. visible: true
  12. }
  13. }
  14. });

水印

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

以下为水印可配置项:

名称类型默认值描述
colorstringrgba(0, 0, 0, 0)水印颜色
visiblebooleanfalse如果为 true,则水印显示在图表上
textstring''包含要在水印中显示的文本
fontSizenumber48水印的字体大小(以像素为单位)
horzAlignleft | center | rightcenter水印水平对齐位置
vertAligntop | center | bottomcenter水印垂直对齐位置

水印定制的例子

  1. chart.applyOptions({
  2. watermark: {
  3. color: "rgba(11, 94, 29, 0.4)",
  4. visible: true,
  5. text: "TradingView Watermark Example",
  6. fontSize: 24,
  7. horzAlign: "left",
  8. vertAlign: "bottom"
  9. }
  10. });

图表布局选项

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

名称类型默认值描述
backgroundColorstring#ffffff图表和刻度的背景颜色
textColorstring#191919刻度的文本颜色
fontSizenumber11刻度值的字体大小
fontFamilystring'Trebuchet MS', Roboto, Ubuntu, sans-serif在刻度上使用 family 字体

布局自定义的例子

  1. chart.applyOptions({
  2. layout: {
  3. backgroundColor: "#FAEBD7",
  4. textColor: "#696969",
  5. fontSize: 12,
  6. fontFamily: "Calibri"
  7. }
  8. });

滚动和缩放选项

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

滚动选项

名称类型默认值描述
mouseWheelbooleantrue如果为 true,则启用使用水平鼠标滚轮的图表滚动
pressedMouseMovebooleantrue如果为 true,则允许按下鼠标左键滚动图表
horzTouchDragbooleantrue如果为 true,则图表处理触摸屏上的水平指针移动。 在这种情况下,网页不会滚动。 如果将其设置为 false,则会滚动网页。 请记住,如果用户开始垂直或水平滚动图表,则向任何方向继续滚动,直到用户松开手指
vertTouchDragbooleantrue如果为 true,则图表处理触摸屏上的垂直指针移动。 在这种情况下,网页不会滚动。 如果将其设置为 false,则会滚动网页。 请记住,如果用户开始垂直或水平滚动图表,则向任何方向继续滚动,直到用户松开手指。

缩放选项

名称类型默认值描述
axisPressedMouseMovebooleantrue如果为 true,则允许按下鼠标左键进行刻度缩放
mouseWheelbooleantrue如果为 true,则启用使用鼠标滚轮进行系列缩放
pinchbooleantrue如果为 true,则启用使用捏合/缩放手势的系列缩放(触摸设备支持此选项)

滚动/缩放自定义的例子

  1. chart.applyOptions({
  2. handleScroll: {
  3. mouseWheel: true,
  4. pressedMouseMove: true
  5. },
  6. handleScale: {
  7. axisPressedMouseMove: true,
  8. mouseWheel: true,
  9. pinch: true
  10. }
  11. });