Apache Zeppelin - Highcharts [英] Apache Zeppelin - Highcharts
问题描述
我正在尝试Apache zeppelin。我想要有高潮。所以我想使用％html解释器。我已经完成了这项工作
print（％html< h3> Hello World !!< / h3>）
它非常完美。知道我有高级代码
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>无标题文档< / title>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js><<<< ; /脚本>
< script type =text / javascriptsrc =http://www.highcharts.com/js/highcharts.js>< / script>
< script type =text / javascriptsrc =http://code.highcharts.com/highcharts.js>< / script>
< script type =text / javascript>
$（
$（'＃container'）。highcharts（{
图：{
plotBackgroundColor：null，
plotBorderWidth： null，
plotShadow：false
}，
title：{
text：'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（）{
返回'< b>'+ this.point.name +'< / b>：'+ this.percentage +'％';
}
}
}
}，
系列：[{
类型：'pie'，
名称：'浏览器共享'，
数据：[
['Firefox'，45.0]，
['IE'，26.8]，
{
名称：'Chrome'，
y ：12.8，
切片：true，
选中：true
}，
['Safari'，8.5]，
['Opera'，6.2]，
['Others'，0.7]
]
}]
}）;
}）;
< / script>
< / head>
< body>
< div id =containerstyle =min-width：400px; height：400px; margin：0 auto>< / div>
< / body>
< / html>
但我怎么能把两者放在一起。我试图搜索样本，但没有帮助。请帮助。使用％angular应该是最简单的。
一个先决条件是应该将highcharts.js加载到页面中。
它可以使用jQuery加载到笔记本中
可以通过加载在Zeppelin中进行简单的修改
git clone https://github.com/apache/zeppelin。 git
cd zeppelin
mvn clean package -DskipTests
$ b $ cd zeppelin-web
bower install highcharts -S
mvn clean package -DskipTests
尽管使用％angular创建静态图表非常简单。虽然从Spark模型转换为Highcharts存在差距。
所以我创建一个项目来填补这个空白。
I am trying Apache zeppelin . I wanted to have highcharts. So I thought of using %html interpreter. I have done this
print("%html <h3> Hello World!! </h3>")
It perfectly works. Know I have the code for 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>
But How could I put both together. I tried searching for samples but no help. Kindly someone help.
using %angular should be the easiest.
One prerequisite is the highcharts.js should be loaded into the page.
It could loaded in the notebook with jQuery
It could be loaded by simple modification in Zeppelin
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
Though it is very straight forward to using %angular to create a static chart. While there is a gap to convert from Spark model to Highcharts.
So I create a project try to fill this gap. spark-highcharts can be used in Zeppelin, spark-shell, or other spark application.
%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()
And got a chart
这篇关于Apache Zeppelin - Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
