| let shortName = this.constant.periodTypeEnum.getNameByCode(this.klineType) + ' 合约2：' + this.currentInstrumentId |
| this.chart.addTechnicalIndicatorTemplate({ |
| name: 'custom_candle_solid', |
| shortName: shortName, |
| precision: 2, |
| bar: { |
| upColor: '#EF5350', |
| downColor: '#26A69A', |
| noChangeColor: '#888889' |
| }, |
| plots: [ |
| { key: 'open', title: '开: ' }, |
| { key: 'close', title: '收: ' }, |
| { key: 'high', title: '高: ' }, |
| { key: 'low', title: '低: ' } |
| ], |
| calcTechnicalIndicator: (dataList, { params, plots }) => { |
| return dataList.map((kLineData, i) => { |
| return { |
| instrumentId: kLineData.instrumentId, |
| timestamp: getDateTime(new Date(kLineData.timestamp)), |
| open: kLineData.open, |
| close: kLineData.close, |
| high: kLineData.high, |
| low: kLineData.low |
| } |
| }) |
| }, |
| render: ({ ctx, dataSource, viewport, styles, xAxis, yAxis }) => { |
| |
| let x = xAxis.convertToPixel(0) |
| dataSource.technicalIndicatorDataList.forEach(function (kLineData, i) { |
| let open = kLineData.open |
| let close = kLineData.close |
| let high = kLineData.high |
| let low = kLineData.low |
| |
| if (close > open) { |
| ctx.strokeStyle = '#EF5350' |
| ctx.fillStyle = '#EF5350' |
| } else if (close < open) { |
| ctx.strokeStyle = '#26A69A' |
| ctx.fillStyle = '#26A69A' |
| } else { |
| ctx.strokeStyle = '#888889' |
| ctx.fillStyle = '#888889' |
| } |
| |
| let openY = yAxis.convertToPixel(open) |
| |
| let closeY = yAxis.convertToPixel(close) |
| |
| let priceY = [openY, closeY, yAxis.convertToPixel(high), yAxis.convertToPixel(low)] |
| |
| priceY.sort(function (a, b) { |
| return a - b |
| }) |
| |
| ctx.fillRect(x - 0.5, priceY[0], 1, priceY[1] - priceY[0]) |
| |
| ctx.fillRect(x - 0.5, priceY[2], 1, priceY[3] - priceY[2]) |
| |
| var barHeight = Math.max(1, priceY[2] - priceY[1]) |
| |
| ctx.fillRect(x - (viewport.barSpace / 2), priceY[1], viewport.barSpace, barHeight) |
| |
| x += viewport.dataSpace |
| }) |
| } |
| }) |
