用onClick事件改变图表属性

Question

我正试图用一个新的方法来改变数据的可视化。onClick 事件。但是由于属性是在调用图表时定义的，所以我不能让属性更新。我使用的是导出菜单中的按钮，所以我不认为使用jQuery方法来更新会有效。

我想实现的是这样的。

          customButton: {
            text: "Update",
            onclick: function() {
              if (!isStackingPercentage) {
                handlePercentageClick()
                //redraw chart?
              }
              else if (isStackingPercentage) {
                handleStackingClick()
                //redraw chart?
              }
            }
          }

这个属性是这样定义的

    plotOptions: {
        column: {
          stacking: isStackingPercentage ? "percent" : "stacking",
          dataLabels: {
            enabled: false
          }
        }
      },

喏 是一个工作实例

Answer 1

你可以通过以下方式访问图表引用 this 在 onclick 功能和使用 update 方法。

  exporting: {
    buttons: {
      customButton: {
        text: "Update",
        onclick: function() {
          if (!isStackingPercentage) {
            handlePercentageClick();
            this.update({
              plotOptions: {
                column: {
                  stacking: 'percent'
                }
              }
            });
          } else if (isStackingPercentage) {
            handleStackingClick();
            this.update({
              plotOptions: {
                column: {
                  stacking: 'normal'
                }
              }
            });
          }
        }
      }
    }
  }

---

现场演示。 https:/jsfiddle.netBlackLabelrb584w70

API参考。 https:/api.highcharts.comclass-referenceHighcharts.Chart#update