Javascript 在scala.js中使用chart.js-未捕获类型错误未定义不是函数

我正在玩这两个很棒的项目，但这是一个斗争，因为我缺乏javascript和web编程的经验

我正在尝试在scala.js程序中使用chart.js。 我这里有一个“uncaught typeerror undefined不是一个函数”：

守则：

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>
...

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

之前（错误）：

之后（好）：

My all 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

---

您是否将

Chart.js

库包含在网页的任何位置？如果没有，你最好这样做；-）我没有。我正在努力想办法把它包括进去。现在，我在build.sbt“org.webjars”%“chartjs”%“1.0.1”中只看到了这些。我在你的图图上看到，我需要使用jsDependencies，而不是libraryDependencies。但是当我这样做的时候，我找到了“error:No implicit for Append.Value[Seq[org.scalajs.sbtplugin.AbstractJSDep]，sbt.ModuleID]，所以sbt.ModuleID不能追加到Seq[org.scalajs.sbtplugin.AbstractJSDep]jsDependencies+=“org.webjars”%“chartjs”%“1.0.1”知道为什么吗？你缺少了一个尾随的

/“chart.js”
jsDependencies
，或类似的东西。就是这样！感谢jsDependencies+=“org.webjars”%“chartjs”%“1.0.1”/“Chart.js”
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

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

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

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