首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在javascript上为烛台顶点图添加注解

如何在javascript上为烛台顶点图添加注解
EN

Stack Overflow用户
提问于 2019-08-03 13:32:00
回答 1查看 1.2K关注 0票数 0

我正在开发candlestick apexcharts,现在试着从从https://apexcharts.com/vue-chart-demos/line-charts/line-chart-annotations获得的代码中添加注释。

  <script>
    var options = {
      chart: {
        height: 750,
        type: 'candlestick',
        annotations: {
         xaxis: [{
              x: new Date(1538780400000),
              strokeDashArray: 0,
              borderColor: '#775DD0',
              label: {
                borderColor: '#775DD0',
                style: {
                  color: '#fff',
                  background: '#775DD0',
                },
                text: 'Anno Test',
              }
            }],
        },
      },
      series: [{
        data: [
          {
            x: new Date(1538778600000),
            y: [6629.81, 6650.5, 6623.04, 6633.33],
          },
          {
            x: new Date(1538780400000),
            y: [6632.01, 6643.59, 6620, 6630.11]
          },
          {
            x: new Date(1538782200000),
            y: [6630.71, 6648.95, 6623.34, 6635.65],
          }
        ]
      }],
      title: {
        text: 'CandleStick Chart',
        align: 'left'
      },
      xaxis: {
        type: 'datetime'
      },
      yaxis: {
        tooltip: {
          enabled: true
        }
      }
    }

    var chart = new ApexCharts(
      document.querySelector("#chart"),
      options
    );

    chart.render();
  </script>

代码可以正确地呈现图表,但不会出现注释。如有任何建议或指导,我们将不胜感激,谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-08-05 02:57:41

annotations属性不应位于chart属性内。它应该在外面。

chart: {
    height: 750,
    type: 'candlestick',
},
annotations: {
    xaxis: [{
        x: 1538780400000,
        strokeDashArray: 0,
        borderColor: '#775DD0',
        label: {
            borderColor: '#775DD0',
            style: {
                color: '#fff',
                background: '#775DD0',
            },
            text: 'Anno Test',
        }
    }],
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57335712

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档