Apache Zeppelin - Highcharts

Я пытаюсь Apache zeppelin. Я хотел иметь высокие диаграммы. Поэтому я подумал об использовании интерпретатора% html. Я сделал этоApache Zeppelin - Highcharts

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

Это прекрасно работает. Знаю, что у меня есть код для высоких карт

<!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 может использоваться в Zeppelin, искровой оболочке или другом искрообразовании.

%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()

И получил диаграмму

источник

2016-06-29 05:26:23

- ваша библиотека высоких диалогов открыта? Это выглядит интересно. – eliasah

не. Я полирую его. @eliasah можете прокомментировать последний интерфейс? http://stackoverflow.com/questions/38530410/are-there-better-interface-to-add-highcharts-support-to-zeppelin –

Я просто публикую библиотеку. –

Цеппелин также поддерживает подключаемые пакеты во время выполнения через Helium framework. Есть несколько диаграмм высокопроизводительных диаграмм с опубликованными пакетами.

источник

2017-09-08 13:58:38 Greg

Apache Zeppelin - Highcharts

ответ

Смежные вопросы