highcharts - 带有咖啡脚本的 Highcharts

Question

我的应用程序需要将 highcharts 与 coffescript 集成。请指导如何开始。可以定制吗？因为我需要在图表下方整合一些链接和按钮。

Answer 1

您真正需要做的就是获取一个 javascript 示例并使用 js2coffee.org 将其转换为 coffeescript。

小提琴：http: //jsfiddle.net/Rf8AS/

$ ->
  $("#container").highcharts
    title:
      text: "Monthly Average Temperature"
      x: -20 #center

    subtitle:
      text: "Source: WorldClimate.com"
      x: -20

    xAxis:
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

    yAxis:
      title:
        text: "Temperature (°C)"

      plotLines: [
        value: 0
        width: 1
        color: "#808080"
      ]

    tooltip:
      valueSuffix: "°C"

    legend:
      layout: "vertical"
      align: "right"
      verticalAlign: "middle"
      borderWidth: 0

    series: [
      name: "Tokyo"
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    ,
      name: "New York"
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    ,
      name: "Berlin"
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    ,
      name: "London"
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    ]

从那里，您需要决定如何将咖啡脚本提供给浏览器。我使用grunt,grunt-contrib-coffee并grunt-contrib-watch在服务器端构建 javascript。另一种选择是连接资产；如果你想要一个使用 connect-assets、angular 和 node.js 的示例应用程序，请查看 Hoverbear 的示例应用程序：https ://github.com/Hoverbear/Angular-Coffee-Express 。