javascript - Highcharts 中 OHLC 烛台中单个点的自定义数据标签

标签 javascript highcharts

This example shows如何为简单 X-Y 图表的单个点设置自定义数据标签:

特别是,点216.4显示为一个对象,它带有自己的数据标签样式。它不像 data 数组中的其他值那样是整数:

 series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 178.0, 135.6, 148.5, {
        y: 216.4,
        dataLabels: {
            borderColor: 'red',
            borderWidth: 2,
            padding: 5,
            shadow: true,
            style: {
                fontWeight: 'bold'
            }
        }
    }, 194.1, 95.6, 54.4]
}]

我想做类似的事情,但是用蜡烛图。特别是,如何更改本示例中只有一根蜡烛的标签的样式:

http://jsfiddle.net/kwukv4by/4/

在第一个示例中,数字被分配给y。当数据是 OHLC 而不是整数值时应该是什么?

最佳答案

您可以以与蜡烛图完全相同的方式覆盖数据标签。只需将 dataLables 对象添加到系列中的点即可。

http://jsfiddle.net/kwukv4by/10/

series: [{
      type: 'candlestick',
      name: 'AAPL Stock Price',
      data: [{
          time: 0,
          high: 100,
          low: 50,
          open: 60,
          close: 80,
          dataLabels: {
            borderRadius: 0,
            backgroundColor: 'green',
            borderWidth: 4,
            borderColor: 'black'
          }
        },
        {
          time: 1,
          high: 90,
          low: 50,
          open: 80,
          close: 70
        },
        {
          time: 2,
          high: 80,
          low: 10,
          open: 40,
          close: 60
        },
        {
          time: 3,
          high: 80,
          low: 10,
          open: 60,
          close: 40
        },
      ],

    }]

关于javascript - Highcharts 中 OHLC 烛台中单个点的自定义数据标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49930907/

相关文章:

javascript - Highcharts:通过单击饼图切片来控制 div 的显示/隐藏

jquery - Highstock 带有日期选择器和非默认日期

javascript - Highcharts 标 checkout 现两次

javascript - OpenLayers 3 根据特征参数值改变点填充颜色?

Javascript 对象数组 : Best way to return a value?

javascript - 我在循环中遇到关闭问题,但我仍然使用单独的函数

javascript - Highcharts:向图表添加线条会从 X 轴删除标签

javascript - 在 JS、CSS 和 HTML 之间显示/隐藏功能

javascript - d3 - 使用 React 的单击事件由于质心坐标而响应缓慢

php - Highcharts 日期时间转换显示错误值