使用AngularJS在Apache Zeppelin中绘制多行（折线图）

Question

我想绘制使用Angular Js和Chart JS的Apache Zeppelin中的多行图表。 我以格式{epoch，id，label，score，tweet_count}在Scala Paragraph中绑定一个数组。目标是每个id，都会有一组不同的值。在运行代码我有两个不同的图（悬停鼠标）。我想有1个图。 例如，对于编号1,2我想绘制一个分数图在同一个画布，不希望它重叠。

angular.forEach(newValue, function(x) { 
    lineChartData = {}; //declare an object 
    lineChartData.labels = []; //add 'labels' element to object (X axis) 
    lineChartData.datasets = []; //add 'datasets' array element to object 


    for(line=0; line < 2; line++) { 

      y = []; 
      lineChartData.datasets.push({}); //create a new line dataset 
      dataset = lineChartData.datasets[line] 
      dataset.data = []; //Y axis data 

      angular.forEach(newValue, function(x) { 
        if(myLineChart != null && myLineChart !== undefined) 
     myLineChart.destroy(); 

       if (line === 0) { 

        // console.log("Value of x: ",x) 

        //adds data to y axis 
        lineChartData.labels.push(x._3) //adds x axis labels 

        dataset.fillColor = "rgba(0, 0, 0, 0)"; 
        dataset.strokeColor = "rgba(75,192,192,0.4)"; 
        dataset.lineColor = "rgba(75,192,192,0.4)"; 
        dataset.label = "Score" 
        y.push(x._4); //y axis value 


       } 

       lineChartData.datasets[line].data = y; 

      }) 
     } 

    }) 

这是我绘制图的代码，但是我想在同一个画布上为每个id绘制不同的线条。

Answer 1

我们可以从一个DataSource（例如Spark DataFrame）到Zeppelin支持%angular的Chart模型进行模型转换。你可以做这样类似SO create a multi line chart using Chart.js

如果这样做的方式，那么当我们想改变到一个不同的模型中的每个时间。我们必须复制&粘贴工作。如果有一个通用的模型转换，它会更容易。

我创建GitHub上spark-highcharts回购的情节很容易与Highcharts火花数据帧。如果您可以接受使用Highcharts，则可以在从Scala集合到Spark DataFrame的简单转换之后使用spark-highcharts进行打印。

像下面的代码一样创建多行图表。

import com.knockdata.spark.highcharts._ 
import com.knockdata.spark.highcharts.model._ 
import sqlContext.implicits._ 

val Tokyo = Seq(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6) 
    .map(("Tokyo", _)) 
val NewYork = Seq(-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5) 
    .map(("New York", _)) 
val Berlin = Seq(-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0) 
    .map(("Berlin", _)) 
val London = Seq(3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8) 
    .map(("London", _)) 

val dataFrame = (Tokyo ++ NewYork ++ Berlin ++ London).toDF("city", "temperature") 

val chart = highcharts(dataFrame 
    .seriesCol("city") 
    .series("y" -> col("temperature"))) 

chart.plot() 

，API为Highcharts和ChartJS之间非常相似。一个类似的库可以完成从Scala集合到类似spark-highcharts那样的ChartJs。