Apache Zeppelin hat gute Unterstützung für AngularJS. Während es eine Lücke zwischen Scala und Javascript gibt.

Ich versuche, @ hinzuzufüg Highcharts Unterstützung für Zeppelin, um diese Lücke zu füllen. Das Hauptziel ist es, es einfach direkt aus @ zu zeichnSpark DataFrame.

Nach ein paar runden Refactor, ich komme mit der folgenden Schnittstelle.

github.com / knockdata / zeppelin-highcharts

Hier gibt es zwei Möglichkeiten.Welche Option ist besser?

Option A

Dies ist ein Beispiel für die Darstellung von Highcharts.

highcharts(bank,
  "marital",
  List("name" -> "age", "y" -> avg(col("balance")), "orderBy" -> col("age")),
  new Title("Marital Job Average Balance").x(-20),
  new Subtitle("Source: Zeppelin Tutorial").x(-20),
  new XAxis("Age").typ("category"),
  new YAxis("Balance(¥)").plotLines(Map("value"->0, "width"->1)),
  new Tooltip().valueSuffix("¥"),
  new Legend().layout("vertical").align("right").verticalAlign("middle")
)

Hier ist der Code ohne zusätzliche Option.

highcharts(bank,
           "marital",
           List("name" -> "age", 
           "y" -> avg(col("balance")), 
           "orderBy" -> col("age")))

Option B

Ich habe diese Option mit der Antwort von @ honnix gefunden. Es hat mehr syntaktischen Zucker.

highcharts(bank).series("marital")
  .data("name" -> "age", "y" -> avg(col("balance")))
  .orderBy(col("age"))
  .title(Title("Marital Job Average Balance").x(-20))
  .subtitle(Subtitle("Source: Zeppelin Tutorial").x(-20))
  .xAxis(XAxis("Age").typ("category"))
  .yAxis(YAxis("Balance(¥)").plotLines("value"->0, "width"->1))
  .tooltip(Tooltip().valueSuffix("¥"))
  .legend(Legend().layout("vertical").align("right").verticalAlign("middle"))
  .plot

Ein einfacher Plot ohne Option ist

highcharts(bank).series("marital")
  .data("name" -> "age", "y" -> avg(col("balance")))
  .orderBy(col("age"))
  .plot

Es wird hier ein Diagramm erstellt.