在 scala.js 中使用 chart.js - 未捕获的类型错误 undefined 不是函数
Use chart.js in scala.js - uncaught typeerror undefined is not a function
我正在玩这两个很棒的项目 ochrons/scalajs-spa-tutorial and with vmunier/play-with-scalajs-example,但由于我缺乏 javascript 和一般 Web 编程的经验,所以这是一场斗争。
我正在尝试在我的 scala.js 程序中使用 chart.js。
我这里有一个 "uncaught typeerror undefined is not a function" :
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
之前(错误):
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
我正在玩这两个很棒的项目 ochrons/scalajs-spa-tutorial and with vmunier/play-with-scalajs-example,但由于我缺乏 javascript 和一般 Web 编程的经验,所以这是一场斗争。
我正在尝试在我的 scala.js 程序中使用 chart.js。 我这里有一个 "uncaught typeerror undefined is not a function" :
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
之前(错误):
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