Question

我正在创建一个Ploymer自定义组件并使用Dygraph创建一个图表。我为此添加了pointClickCallback。

但是，当图表在阴影dom pointClickcallback内部根本不工作时。虽然，当我将图表放在自定义组件之外，即在index.html中时，pointClickCallback工作正常。

编辑： highlightCallback在影子dom中正常工作，而不是pointClickCallback

任何人都可以告诉我可能是什么问题。

更新

我不确定这是否是正确的做法，但请提出建议。我在下面这样做，它对我有用

var self = this; // 'this' is not the window object
self.pts = null;
var g = new Dygraph(
    this.$.div_g,
    NoisyData, {
      rollPeriod: 7,
      showRoller: true,

      errorBars: true,
      highlightCallback: function(e, x, pts, row) {
          console.log("highlightCallback --> self.pts", self.pts);
          console.log("highlightCallback", pts);
          self.pts = pts;
          console.log("highlightCallback --> self.pts", self.pts);
      },
      interactionModel : {
          'click' : function(e) {
              console.log("click", e, self.pts);
          }
      },
    }
  );

Answer 1

interactionModel不会进入highlightCallback，但基本上与var g = new Dygraph( this.$.div_g, NoisyData, { rollPeriod: 7, showRoller: true, errorBars: true, highlightCallback: function(e, x, pts, row) { console.log("highlightCallback --> self.pts", self.pts); console.log("highlightCallback", pts); self.pts = pts; console.log("highlightCallback --> self.pts", self.pts); }, pointClickCallback: function(e,pt) { console.log('Point clicked'); }, interactionModel : { 'click' : function(e) { console.log("click", e, self.pts); } }, } );处于同一级别。所以你的代码应该是这样的：

body { margin: 0; }                /* remove default margin */

.jflex {
    display: flex;
    flex-direction: row;           /* initial setting; can be omitted */
    flex-wrap: nowrap;             /* initial setting; can be omitted */
    /* item-align: stretch;        correct property is `align-items`;
                                   and it's an initial setting so it can be omitted */
}

.left-menu {
    /* width: 275px; */
    flex: 0 0 275px;               /* KEY RULE: don't grow, don't shrink, fixed width */
    padding: 1em;
    background: red;
}

.right-content {
    /* width: calc(100% - 275px);  flexbox has a better way */
    flex: 1;                       /* KEY RULE: tells element to consume remaining space */
    padding: 1em;
    background: blue;
}

Dygraph的点击回调无法在Polymer Shadow DOM中使用

1 个答案: