Apache Zeppelin - Highcharts - IT屋-程序员软件开发技术分享社区
- 首页
- 其他开发
- Apache Zeppelin - Highcharts
Apache Zeppelin - Highcharts
[英] Apache Zeppelin - Highcharts
本文介绍了Apache Zeppelin - Highcharts的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 Apache zeppelin.我想要highcharts.所以我想到了使用 %html 解释器.我已经这样做了
print("%html Hello World!!
")
它完美地工作.知道我有 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"><头><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</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">$(函数(){$('#container').highcharts({图表: {绘图背景颜色:空，plotBorderWidth:空，情节阴影:假},标题: {text: '特定网站的浏览器市场份额，2010'},工具提示:{pointFormat: '{series.name}: <b>{point.percentage}%</b>',百分比小数:1},绘图选项:{馅饼:{允许点选择:真，光标:'指针'，数据标签:{启用:真，颜色:'#000000'，连接器颜色:'#000000'，格式化程序:函数(){return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';}}}},系列: [{类型:'馅饼'，name: '浏览器共享',数据: [['火狐', 45.0],['IE'，26.8]，{名称:'铬'，y:12.8，切片:真实，选择:真},['Safari', 8.5],['歌剧'，6.2]，['其他'，0.7]]}]});});<身体><div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</html>但是我怎么能把两者放在一起.我尝试搜索样本，但没有帮助.请有人帮忙.
解决方案
使用 %angular 应该是最简单的.
一个先决条件是应该将 highcharts.js 加载到页面中.
<块引用>它可以用 jQuery 加载到 notebook 中
在 Zeppelin 中简单修改即可加载
git clone https://github.com/apache/zeppelin.git齐柏林飞艇mvn clean package -DskipTestscd zeppelin-web凉亭安装 highcharts -Smvn 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屋！
查看全文
