使用 Angular-Chartist 和 CoffeeScript 格式化 Chartist 标签

Question

我正在尝试将我的标签格式化为百分比。我已经尝试查看 Chartist.js 的文档并将其转换为 CoffeeScript，问题是事情对我来说不是很清楚，因为我们使用的是 Angular，因此 angular-chartist模块。这是一个相当微不足道的部分，我不能要求我的联合创始人花时间在上面，因为我们的项目中有许多更大的部分在起作用，但我想了解我的不足之处。

图表是使用图表师指令显示的（我猜这是 angular-chartist 的一部分）：

<chartist class="ct-chart" chartist-data="typeCounts" chartist-chart-type="Bar" chartist-responsive-options="typeCounts.barResponsiveOptions"></chartist>

这是我的 coffeescript，用于尝试获取其中的选项（请注意标签和系列属性工作正常；但图表元素没有选择 barResponsiveOptions 属性（因此console.log 调试行未触发）：

  # Organize return data into labels and series for Chartist
  typeCounts = ResultService.getTypeCounts()
  $scope.typeCounts.labels = Object.keys(typeCounts)
  $scope.typeCounts.series = [typeCounts[type] for type in Object.keys(typeCounts)]
  $scope.typeCounts.barResponsiveOptions = [
    axisY:
      labelInterpolationFnc: (value) ->
        console.log("Firing barResponsiveOptions")
        Math.round(value * 100) + '%'
  ]

现在图表显示 y 轴上的数据点为 1 的小数部分（例如 0.0 -> 1.0）。

Answer 1

您应该为您的常规选项使用 chartist-chart-options 属性，如果您没有按照此处所述使用响应式选项，则应使用 chartist-responsive-options https://gionkunz.github.io/chartist-js/getting-started.html#responsive-sugar-topping。

干杯

使用 Angular-Chartist 和 CoffeeScript 格式化 Chartist 标签

Formatting Chartist Labels using Angular-Chartist and CoffeeScript

coffeescript

angularjs

chartist.js

angular-chartist.js