javascript - 如何在javascript上为烛台顶点图添加注释

Question

我正在努力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>

代码可以正确渲染图表但没有出现注释。对此的任何建议或指导将不胜感激，谢谢

Answer 1

该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',
        }
    }],
}