最新一根蜡烛的现价线显示如何自定义内容？

[StationSun]

版本

9.8.7

复现步骤

candle.candle.priceMark.last.text 配置中，想要自定义文本信息内容，如何像Trading View一样生效

当前效果

当前无法生效配置文本内容自定义

预期效果

期望效配置文本内容自定义

环境

- 系统:
- 浏览器:
- 框架:

补充说明

No response

[vannamphuc]

I am also needing to do a similar function like this. If you find a solution can you guide me please. Thank you very much

[vannamphuc]

Hello @StationSun
I found a solution to this problem but it will have performance issues. First I will have to find the position of priceMark in yAxis. Here I use

const dataList = chart.getDataList();
const lastData = dataList[dataList.length - 1];
const lastPrice = lastData.close;

After that I use convertToPixel to get the pixel value of priceMark

const pixelPosition = chart.convertToPixel(
{ value: lastPrice },
{ paneId: "candle_pane" }
);

Then I will create a state to save pixelPosition.y to

setPosition(pixelPosition.y);

Then I hide priceMark.text then I create a div to display it with top being the value of setPosition

<div
style={{
right: 0,
top: top,
zIndex: 100,
fontSize: 10,
borderRadius: 5,
paddingBlock: 2,
paddingInline: 5,
color: "#aaaaaa",
position: "absolute",
transition: "top 0.5s",
border: "1px solid #aaaaaa",
backgroundColor: themeParams === "dark" ? "#181A20" : "#FFFFFF",
}}
>
{String(lastPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
<br />
{new Date().toLocaleTimeString()}
</div>

Here there will be a problem that sometimes the position will be larger than the height value of the screen. So I create a function like this:

const [top, setTop] = useState(position);
useEffect(() => {
if (position > height) {
setTop(height * 0.95 - 8);
} else {
setTop(position - 8);
}
}, [position]);

But because of setState like that, it will be a bit sluggish when dragging the chart too fast. I think this is a pretty good approach. If possible, can you help me fix it?

[StationSun]

你好@StationSun 我找到了解决这个问题的方法，但它会有性能问题。首先，我必须找到 priceMark 在 yAxis 中的位置。在这里我使用

const dataList = chart.getDataList();
const lastData = dataList[dataList.length - 1];
const lastPrice = lastData.close;

之后我使用 convertToPixel 获取 priceMark 的像素值

const pixelPosition = chart.convertToPixel(
{ value: lastPrice },
{ paneId: "candle_pane" }
);

然后我将创建一个状态来保存 pixelPosition.y 到

setPosition(pixelPosition.y);

然后我隐藏 priceMark.text 然后创建一个 div 来显示它，其中 top 是 setPosition 的值

<div
style={{
right: 0,
top: top,
zIndex: 100,
fontSize: 10,
borderRadius: 5,
paddingBlock: 2,
paddingInline: 5,
color: "#aaaaaa",
position: "absolute",
transition: "top 0.5s",
border: "1px solid #aaaaaa",
backgroundColor: themeParams === "dark" ? "#181A20" : "#FFFFFF",
}}
>
{String(lastPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
<br />
{new Date().toLocaleTimeString()}
</div>

这里会出现一个问题，就是有时候位置会大于屏幕的高度值。所以我创建了一个这样的函数：

const [top, setTop] = useState(position);
useEffect(() => {
if (position > height) {
setTop(height * 0.95 - 8);
} else {
setTop(position - 8);
}
}, [position]);

但是因为这样setState，拖拽图表太快的时候会有点卡顿，我觉得这个办法还不错，如果可以的话能帮我解决一下吗？

Hello @StationSun I found a solution to this problem but it will have performance issues. First I will have to find the position of priceMark in yAxis. Here I use

const dataList = chart.getDataList();
const lastData = dataList[dataList.length - 1];
const lastPrice = lastData.close;

After that I use convertToPixel to get the pixel value of priceMark

const pixelPosition = chart.convertToPixel(
{ value: lastPrice },
{ paneId: "candle_pane" }
);

Then I will create a state to save pixelPosition.y to

setPosition(pixelPosition.y);

Then I hide priceMark.text then I create a div to display it with top being the value of setPosition

<div
style={{
right: 0,
top: top,
zIndex: 100,
fontSize: 10,
borderRadius: 5,
paddingBlock: 2,
paddingInline: 5,
color: "#aaaaaa",
position: "absolute",
transition: "top 0.5s",
border: "1px solid #aaaaaa",
backgroundColor: themeParams === "dark" ? "#181A20" : "#FFFFFF",
}}
>
{String(lastPrice).replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
<br />
{new Date().toLocaleTimeString()}
</div>

Here there will be a problem that sometimes the position will be larger than the height value of the screen. So I create a function like this:

const [top, setTop] = useState(position);
useEffect(() => {
if (position > height) {
setTop(height * 0.95 - 8);
} else {
setTop(position - 8);
}
}, [position]);

But because of setState like that, it will be a bit sluggish when dragging the chart too fast. I think this is a pretty good approach. If possible, can you help me fix it?

I have looked at your proposal and it seems very good, but my proposal is implemented through creatOverlay and is currently being implemented. I will send it out later

[vannamphuc]

Any progress on your idea? @StationSun

[StationSun]

Any progress on your idea? @StationSun

I will first add registrant overlay (yourSelf) in Widget. ts;

Then create
this._chart?.createOverlay({
name: 'yourSelf',
points: [{ value: lastPrice }],
});

Finally, call the business logic again
const dataList = widgetRef.current?.chart()?. getDataList()

const latestCandle = dataList[dataList.length - 1];

const priceLineValue = Number(latestCandle?. close);
widgetRef.current?.createLastPriceFigures({
lastPrice: priceLineValue
});
Very sad. I cannot customize the HTML I want, time countdown. Because the type only supports string types

[StationSun]

But because of setState like that, it will be a bit sluggish when dragging the chart too fast. I think this is a pretty good approach. If possible, can you help me fix it?

Hi~. man ! How did you handle this stuttering issue in the end? @tomheo11233aA

[vannamphuc]

But because of setState like that, it will be a bit sluggish when dragging the chart too fast. I think this is a pretty good approach. If possible, can you help me fix it?

Hi~. man ! How did you handle this stuttering issue in the end? @tomheo11233aA

My chart doesn't need to pull data back so I disabled scroll and zoom. I still can't find a solution to this problem @@ @StationSun

[vannamphuc]

I just can put

transition: "top 0.5s",

To make animation smoothy a little bit @@