klinecharts / KLineChart

📈Lightweight k-line chart that can be highly customized. Zero dependencies. Support mobile.(可高度自定义的轻量级k线图,无第三方依赖,支持移动端)

Home Page:https://klinecharts.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

drawing a rectangle[Bug]

Upsssssss opened this issue · comments

Version

lates

Steps to Reproduce

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/klinecharts/dist/klinecharts.min.js"></script> <title>Quick Start</title>
<script> window.onload = function () { // initialize the chart var chart = klinecharts.init('chart')
     // add data to the chart
     chart.applyNewData([
       { close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
       { close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.20, timestamp: 1587660060000, volume: 194 },
       { close: 4977.93, high: 4977.93, low: 4974.20, open: 4976.53, timestamp: 1587660120000, volume: 197 },
       { close: 4966.77, high: 4968.53, low: 4962.20, open: 4963.88, timestamp: 1587660180000, volume: 28 },
       { close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
       { close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
       { close: 4968.93, high: 4972.70, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
       { close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
       { close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
       { close: 4985.09, high: 4988.62, low: 4980.30, open: 4986.72, timestamp: 1587660540000, volume: 76 }
     ])

alert(convertToPixel({ timestamp: 1587660000000, value: 4977.99 }, {}))
}
</script>

Current Behavior

I'm trying to make several rectangles on the chart, I tried by drawing shapes, but there was a problem with getting the y coordinate, the convertToPixel(value, finder) function returns the x coordinate, and y is null. maybe somehow you can create them through the CreateOverlay function? Can someone show me a code example where the input data is the price value and timestamp?

Expected Behavior

rectangle with the possibility of choosing the requested color

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

commented
chart.applyNewData(
  [...], false, () => {
    chart.convertToPixel(...)
  }
)