Question

我一直在为我的一个项目广泛使用HighCharts。最近我开始使用Annotation.js。

虽然图书馆运作良好，但我根本无法配置它的用法。这里的link提供了选项，但它们对我不起作用

我的问题：

我在页面上有多个图表。一旦我使用annotation.js，它们每个都显示注释。如何在所需的图表上显示它们。我试过了 annotations :[{ enabledButtons : false}] 和 annotationOptions :{ enabledButtons : false}

他们两个都没有影响。

2.我想在右上方显示调色板（包含方形，圆形等图标）。我使用了xValue, yValue属性，我使用了x, y属性，我使用了＆＃39; anchorX和anchorY`属性。

以上都不适合我。

我只想显示文字图标。如何隐藏其他图标（线条，方形和圆形）。没有办法尝试这个。

我在这里遗漏了什么。请建议。我使用图表配置的基本方法如下：

chart: {
                    type: chartData.Type.toLowerCase()
                    //annotations: [],

                },
                annotationsOptions: {
                    xValue: 234,
                    yValue:12
                },
                title: {
                    text: chartData.xTitle ? chartData.xTitle : ""
                },
                xAxis: {
                    categories: chartData.Categories
                },
                yAxis: {
                    allowDecimals: false,
                    min: 0,
                    title: {
                        text: chartData.yTitle ? chartData.yTitle : ""
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: "#808080"
                    }]
                },
                 annotations: [{
                    xValue: 40,
                    yValue: 15
                }],
                plotOptions: {
                    line: {
                        marker: {
                            enabled: true
                        }
                    }
                },
                series: chartData['Series'][opt] ? chartData['Series'][opt] : chartData['Series'][opt.replace(/-|\s/g, "")],
            }

我也在图表对象中尝试过注释。

Answer 1

您应该可以使用以下方法隐藏注释按钮：

annotationsOptions: {
  enabledButtons: false
},

您可以使用annotationsOptions.buttons更改要显示的按钮。在这里，您可以看到仅显示文本butotn的代码：

annotationsOptions: {
  buttons: [{
    annotationEvents: {
      step: function() {}, // to be called during mouse drag for new annotation
      stop: function(e) {
          var ann = this,
            chart = ann.chart,
            index = chart.annotationInputIndex = chart.annotationInputIndex ? chart.annotationInputIndex : 1,
            input = document.createElement('span'),
            button;

          input.innerHTML = '<input type="text" class="annotation-' + index + '" placeholder="Add text"><button class=""> Done </button>';
          input.style.position = 'absolute';
          input.style.left = e.pageX + 'px';
          input.style.top = e.pageY + 'px';

          document.body.appendChild(input);
          input.querySelectorAll('input')[0].focus();
          button = input.querySelectorAll('button')[0];
          button.onclick = function() {
            var parent = this.parentNode;

            ann.update({
              title: {
                text: parent.querySelectorAll('input')[0].value
              }
            });
            parent.parentNode.removeChild(parent);
          };
          chart.annotationInputIndex++;
        } // to be called after mouse up / release
    },
    annotation: { // standard annotation options, used for new annotation
      anchorX: 'left',
      anchorY: 'top',
      xAxis: 0,
      yAxis: 0,
      shape: {
        // type: 'text'
      }
    },
    symbol: { // button symbol options
      shape: 'text', // shape, taken from Highcharts.symbols
      size: 12,
      style: {
        'stroke-width': 2,
        'stroke': 'black',
        fill: 'red',
        zIndex: 121
      }
    },
    style: { // buton style itself
      fill: 'black',
      stroke: 'blue',
      strokeWidth: 2,
    },
    size: 12, // buton size
    states: { // states for button 
      selected: {
        fill: '#9BD'
      },
      hover: {
        fill: '#9BD'
      }
    }
  }]
}

在这里，您可以找到一个示例：http://jsfiddle.net/7m3Mr/261/

您可以使用以下方式移动按钮：

annotationsOptions: {
  buttonsOffsets: [0, -50],
},

在这里，您可以找到演示如何工作的演示： http://jsfiddle.net/7m3Mr/263/

如何在HighCharts

1 个答案: