Question

我目前正在尝试在图表中使用角度变量。播放圆环图表。我还使用bootstrap官方仪表板主题，允许使用html数据属性将数据传递到图表组件。我认为这就像将一个带有数据的角变量传入html数据属性一样简单，但事实并非如此。

正如您在下面的控制台输出中所看到的，在chartjs代码触发时尚未评估角度变量。

{{data}}
[{ value: 330, color: '#42a5f5', label: 'Average' }, { value: 30, color: '#1bc98e', label: 'Now' }]

这就是我记录传入参数的地方。

doughnut: function (element) {
  var attrData = $.extend({}, $(element).data())
  var data     = eval(attrData.value)

  console.log(attrData.value);

  Charts._cleanAttr(attrData)

  var options = $.extend({
    responsive: true,
    animation: false,
    segmentStrokeColor: '#fff',
    segmentStrokeWidth: 2,
    percentageInnerCutout: 80,
  }, attrData)

  new Chart(element.getContext('2d')).Doughnut(data, options)
},

上面的块是一个由Bootstrap团队编写的辅助函数，用于使用数据属性在html块中使用Chart.js组件。 html在下面。

不起作用的HTML：

<canvas
        class="ex-graph"
        id="powerChart"
        width="200" height="200"
        data-chart="doughnut"
        data-value="{{data}}"
        data-segment-stroke-color="#222">
      </canvas>

可行的HTML：

<canvas
        class="ex-graph"
        width="200" height="200"
        data-chart="doughnut"
        data-value="[{ value: 330, color: '#42a5f5', label: 'Average' }, { value: 30, color: '#1bc98e', label: 'Now' }]"
        data-segment-stroke-color="#222">
      </canvas>

angular变量是'data-value'attr的精确副本。在开发控制台中检查元素时，我可以看到它应该使用的数据。

我尝试过使用超时，ng-init，通过触发Bootstrap团队编写的'redraw.bs.charts'事件强制重新绘制购物车，但没有一个工作。

肯定有人以前一直使用这些组件。有人有什么建议吗？我已经达到了挫折的程度，因为它甚至没有抛出任何错误。

在Chartjs数据attr中使用Angular变量

0 个答案: