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

【问题标题】：Formatting Chartist Labels using Angular-Chartist and CoffeeScript使用 Angular-Chartist 和 CoffeeScript 格式化 Chartist 标签
【发布时间】：2015-12-17 22:26:17
【问题描述】：

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

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

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

这是我尝试获取选项的咖啡脚本（请注意，标签和系列属性工作正常；但图表元素未获取 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）。

【问题讨论】：

标签： angularjs coffeescript chartist.js angular-chartist.js

【解决方案1】：

您应该将chartist-chart-options 属性用于您的常规选项，如果您不使用此处解释的响应选项https://gionkunz.github.io/chartist-js/getting-started.html#responsive-sugar-topping，则应使用chartist-responsive-options。

干杯

【讨论】：