在scala.js中使用chart.js - uncaught typeerror undefined不是函數

Question

我正在玩這兩個很棒的項目ochrons/scalajs-spa-tutorial和vmunier/play-with-scalajs-example，但是由於我在JavaScript和web編程方面經驗不足一般。

我想在我的scala.js程序中使用chart.js。 我有一個 「遺漏的類型錯誤不確定是不是一個函數」 在這裏：

val t = new JSChart(ctx).Bar(ChartData(Seq("A", "B", "C"), Seq(ChartDataset(Seq(1, 2, 3), "Data1")))) 

代碼：

object ScalaJSExample extends js.JSApp { 
def main(): Unit = { 
    //dom.document.getElementById("page-wrapper").asInstanceOf[html.Div].innerHTML = "GoT" 
} 

@JSExport 
def test(canvas: html.Canvas): Unit = { 
    val ctx = canvas.getContext("2d") 
    val t = new JSChart(ctx).Bar(ChartData(Seq("A", "B", "C"), Seq(ChartDataset(Seq(1, 2, 3), "Data1")))) 
    t.build 
} 

trait ChartDataset extends js.Object { 
    def label: String = js.native 
    def fillColor: String = js.native 
    def strokeColor: String = js.native 
    def data: js.Array[Double] = js.native 
} 

object ChartDataset { 
    def apply(data: Seq[Double], label: String, fillColor: String = "#8080FF", strokeColor: String = "#404080"): ChartDataset = { 
    js.Dynamic.literal(
     data = data.toJSArray, 
     label = label, 
     fillColor = fillColor, 
     strokeColor = strokeColor 
    ).asInstanceOf[ChartDataset] 
    } 
} 

trait ChartData extends js.Object { 
    def labels: js.Array[String] = js.native 
    def datasets: js.Array[ChartDataset] = js.native 
} 

object ChartData { 
    def apply(labels: Seq[String], datasets: Seq[ChartDataset]): ChartData = { 
    js.Dynamic.literal(
     labels = labels.toJSArray, 
     datasets = datasets.toJSArray 
    ).asInstanceOf[ChartData] 
    } 
} 

// define a class to access the Chart.js component 
@JSName("Chart") 
class JSChart(ctx: js.Dynamic) extends js.Object { 
    // create different kinds of charts 
    def Line(data: ChartData): js.Dynamic = js.native 
    def Bar(data: ChartData): js.Dynamic = js.native 
    } 
} 

我的觀點：

<div id="page-wrapper"> 
    <canvas style="display: block" id="canvas" width="255" height="255"/> 
</div> 
... 
@playscalajs.html.scripts("scalajsClient") 
<script> 
    example.ScalaJSExample().test(document.getElementById('canvas')); 
</script> 
... 

我怎麼錯過？

更新：

由於srjd建議，我並沒有包括chart.js之。現在我正在嘗試這樣做。我更改了我的build.sbt，在webjar chart.js上添加了jsDependencies。但是我有這個錯誤。任何想法爲什麼？

$sbt reload 
error: No implicit for Append.Value[Seq[org.scalajs.sbtplugin.AbstractJSDep], sbt.ModuleID] found, 
    so sbt.ModuleID cannot be appended to Seq[org.scalajs.sbtplugin.AbstractJSDep] 
    jsDependencies += "org.webjars" % "chartjs" % "1.0.1", 

Build.sbt

import org.scalajs.sbtplugin.ScalaJSPlugin 
import org.scalajs.sbtplugin.cross.CrossType 
import play.PlayScala 
import playscalajs.ScalaJSPlay 
import sbt.Project.projectToRef 

lazy val clients = Seq(scalajsClient) 
lazy val scalaV = "2.11.6" 

lazy val playServer = (project in file("play-server")).settings(
    scalaVersion := scalaV, 
    scalaJSProjects := clients, 
    pipelineStages := Seq(scalaJSProd, gzip), 
    libraryDependencies ++= Seq(
    "com.vmunier" %% "play-scalajs-scripts" % "0.2.1", 
    "org.webjars" % "jquery" % "1.11.1", 
    "org.webjars" % "chartjs" % "1.0.1" 
) 
).enablePlugins(PlayScala). 
    aggregate(clients.map(projectToRef): _*). 
    dependsOn(sharedJvm) 

lazy val scalajsClient = (project in file("scalajs-client")).settings(
    scalaVersion := scalaV, 
    persistLauncher := true, 
    persistLauncher in Test := false, 
    sourceMapsDirectories += sharedJs.base/"..", 
    unmanagedSourceDirectories in Compile := Seq((scalaSource in Compile).value), 
    jsDependencies += "org.webjars" % "chartjs" % "1.0.1", 
    libraryDependencies ++= Seq(
    "org.scala-js" %%% "scalajs-dom" % "0.8.0" 
) 
).enablePlugins(ScalaJSPlugin, ScalaJSPlay). 
    dependsOn(sharedJs) 

lazy val shared = (crossProject.crossType(CrossType.Pure) in file("shared")). 
    settings(scalaVersion := scalaV). 
    jsConfigure(_ enablePlugins ScalaJSPlay). 
    jsSettings(sourceMapsBase := baseDirectory.value/"..") 

lazy val sharedJvm = shared.jvm 
lazy val sharedJs = shared.js 


onLoad in Global := (Command.process("project playServer", _: State)) compose (onLoad in Global).value 

Answer 1

之前（錯誤）：

jsDependencies += "org.webjars" % "chartjs" % "1.0.1" 

後（好）：

jsDependencies += "org.webjars" % "chartjs" % "1.0.1"/"Chart.js" 

我的所有build.sbt：

import org.scalajs.sbtplugin.ScalaJSPlugin 
import org.scalajs.sbtplugin.cross.CrossType 
import play.PlayScala 
import playscalajs.ScalaJSPlay 
import sbt.Project.projectToRef 

lazy val clients = Seq(scalajsClient) 
lazy val scalaV = "2.11.6" 

lazy val playServer = (project in file("play-server")).settings(
    scalaVersion := scalaV, 
    scalaJSProjects := clients, 
    pipelineStages := Seq(scalaJSProd, gzip), 
    libraryDependencies ++= Seq(
    "com.vmunier" %% "play-scalajs-scripts" % "0.2.1", 
    "org.webjars" % "jquery" % "1.11.1", 
    "org.webjars" % "chartjs" % "1.0.1" 
) 
).enablePlugins(PlayScala). 
    aggregate(clients.map(projectToRef): _*). 
    dependsOn(sharedJvm) 

lazy val scalajsClient = (project in file("scalajs-client")).settings(
    scalaVersion := scalaV, 
    persistLauncher := true, 
    persistLauncher in Test := false, 
    sourceMapsDirectories += sharedJs.base/"..", 
    unmanagedSourceDirectories in Compile := Seq((scalaSource in Compile).value), 
    jsDependencies += "org.webjars" % "chartjs" % "1.0.1"/"Chart.js", 
    skip in packageJSDependencies := false, 
    libraryDependencies ++= Seq(
    "org.scala-js" %%% "scalajs-dom" % "0.8.0" 
) 
).enablePlugins(ScalaJSPlugin, ScalaJSPlay). 
    dependsOn(sharedJs) 

lazy val shared = (crossProject.crossType(CrossType.Pure) in file("shared")). 
    settings(scalaVersion := scalaV). 
    jsConfigure(_ enablePlugins ScalaJSPlay). 
    jsSettings(sourceMapsBase := baseDirectory.value/"..") 

lazy val sharedJvm = shared.jvm 
lazy val sharedJs = shared.js 



// loads the Play project at sbt startup 
onLoad in Global := (Command.process("project playServer", _: State)) compose (onLoad in Global).value