Apache Zeppelin - Highcharts

我正在嘗試Apache zeppelin。我想要有高潮。所以我想使用％html解釋器。我已經做到了這一點Apache Zeppelin - Highcharts

print("%html <h3> Hello World!! </h3>")

它完美的作品。知道我有代碼爲highcharts

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.highcharts.com/js/highcharts.js"></script> 
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script> 


<script type="text/javascript"> 

    $(function() { 
     $('#container').highcharts({ 
      chart: { 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false 
      }, 
      title: { 
       text: 'Browser market shares at a specific website, 2010' 
      }, 
      tooltip: { 
       pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
       percentageDecimals: 1 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: true, 
         color: '#000000', 
         connectorColor: '#000000', 
         formatter: function() { 
          return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; 
         } 
        } 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Browser share', 
       data: [ 
        ['Firefox', 45.0], 
        ['IE',  26.8], 
        { 
         name: 'Chrome', 
         y: 12.8, 
         sliced: true, 
         selected: true 
        }, 
        ['Safari', 8.5], 
        ['Opera',  6.2], 
        ['Others', 0.7] 
       ] 
      }] 
     }); 
    }); 
</script> 
</head> 

<body> 
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
</body> 
</html>

但我怎麼能把兩個在一起。我試圖搜索樣本，但沒有幫助。請幫助。

來源

2016-05-13 Learner

使用％角度應該是最簡單的。

一個先決條件是highcharts.js應該加載到頁面中。

它可以裝在筆記本上使用jQuery

它可以通過簡單的修改在齊柏林

git clone https://github.com/apache/zeppelin.git 
cd zeppelin 
mvn clean package -DskipTests 

cd zeppelin-web 
bower install highcharts -S 
mvn clean package -DskipTests

裝載雖然這是很直截了當地使用％角創建一個靜態圖表。雖然從Spark模型轉換爲Highcharts存在差距。

所以我創建了一個項目來填補這個空白。 spark-highcharts可用於齊柏林飛艇，火星殼或其他火花應用。

%spark 
import com.knockdata.spark.highcharts._ 
import com.knockdata.spark.highcharts.model._ 

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

，並得到了圖