Python Altair 차트에서 재사용 가능한 JavaScript 모듈 생성을위한 튜토리얼

이 자습서는 Python Altair에서 생성 한 HTML 차트에서 핵심 JavaScript 코드를 추출하는 방법을 자세히 설명하고 독립형 .js 파일로 저장하는 방법을 자세히 설명합니다. Python String 조작을 사용하면 Altair 차트를 웹 페이지에 내장 할 수있는 모듈 식 자바 스크립트 구성 요소로 쉽게 변환하고 사용자 정의 차트 컨테이너 ID를 지원하여 프론트 엔드 개발에 대한 유연성 및 코드 재사용성을 향상시킬 수 있습니다.

1. 배경 및 수요 분석

Python의 Altair Library는 Vega-Lite 사양을 기반으로하며 고품질 대화 형 차트를 생성 할 수있는 강력한 선언적 통계 시각화 도구입니다. 일반적으로 Chart.Save ( 'Chart.html') 메소드를 사용하면 차트를 모든 HTML 구조, CSS 스타일 및 차트를 렌더링하는 데 필요한 Core JavaScript 논리를 포함하는 완전한 HTML 파일로 저장합니다.

그러나 일부 웹 개발 시나리오에서는 완전한 HTML 파일이 필요하지 않을 수 있지만 차트의 핵심 JavaScript 코드를 얻고 재사용하려고합니다. 예를 들어:

• 모듈 식 개발 : 차트 로직을 독립적 인 JS 파일로 캡슐화하여 다른 HTML 페이지 또는 프론트 엔드 프레임 워크에서 주문형 소개에 편리합니다.
• 기존 웹 프로젝트 통합 : Altair는 독립형 페이지가 아닌 기존 웹 응용 프로그램의 일부로 차트를 생성했습니다.
• 동적 로딩 : 페이지 새로 고침을 피하기 위해 JavaScript를 통한 동적로드 차트.

이 튜토리얼의 목표는 Vega-lite 사양이 포함 된 JavaScript 코드를 정확하게 추출하는 방법을 보여주고 Altair에서 생성 한 HTML에서 Vega Embed Call Logic을 포함하여 독립적으로 참조 할 수있는 .js 파일로 저장하는 것입니다.

2. 핵심 원칙 : HTML 문자열 구문 분석

Altair가 생성 한 HTML 파일 내부에서 차트의 렌더링 논리는 일반적으로 즉각적인 실행 함수 표현식 (IIFE)에 캡슐화되어 Vegaembed를 매개 변수로 취하고 Vega-Lite의 사양 (정전사) 객체와 Vegaembed를 호출하는 코드를 정의합니다.

 <cript>
  (기능 (Vegaembed) {
    var spec = { / * ... Vega-lite specification ... * /};
    var embedopt = { / * ... Embed Option ... * /};
    // ... 오류 처리 기능 ...
    const el = document.getElementById ( 'Vis');
    Vegaembed ( "#vis", spec, embedopt)
      .catch (error => 샤워러 (el, error));
  }) (Vegaembed);
스크립트></cript>

Altair는 순수한 JavaScript 파일을 직접 내보내는 내장 기능을 제공하지 않기 때문에 가장 직접적이고 효과적인 방법은 Python을 사용하여 HTML 문자열을 구문 분석하고 차단하는 것입니다. JavaScript 코드 블록에 고유 한 식별자를 찾아 필요한 JS 코드를 정확하게 추출 할 수 있습니다 (예 : Vegaembed 기능의 시작 및 끝 위치).

3. 구현 단계

3.1 Altair 차트를 생성하고 HTML 문자열을 얻습니다

먼저 Altair를 사용하여 차트를 작성하여 HTML 문자열로 변환해야합니다. Chart.to_html () 메소드가이를 달성 할 수 있습니다.

 Altair를 Alt로 가져옵니다
VEGA_DATASETS에서 데이터 가져 오기

# 샘플 데이터 소스 = data.cars.url

# Altair 차트 작성 차트 = alt.chart (source) .mark_circle (). encode (
    x = alt.x ( '마력 : Q', scale = alt.scale (nice = false)),
    y = 'miles_per_gallon : q',
    색상 = '원산지 : n' # 예제를 강화하기 위해 색상 코딩 추가) .properties (
    title = '원산지 별 갤런 당 마일 마일'
))

# 차트 변환 html 문자열 html_chart = Chart.to_html ()

# 일부 HTML 컨텐츠를 인쇄하여# print (html_chart [: 500])를 볼 수 있습니다.

3.2 JavaScript 코드 블록 추출

완전한 HTML 문자열을 얻은 후 다음 단계는 필요한 JavaScript 코드를 찾아 추출하는 것입니다. 이 코드 블록은 일반적으로 (함수 (vegaembed)로 시작하여} (vegaembed)로 시작합니다. Python의 str.index () 메소드를 사용하여 이러한 경계를 찾을 수 있습니다.

 # JavaScript 코드 블록의 시작 및 종료 위치 찾기# 참고 :이 오프셋은 Altair가 생성 한 HTML 구조를 기반으로 한 경험에서 파생됩니다.
# 그들은 전체 iife`(function (vegaembed) {...}) (Vegaembed);`을 정확하게 캡처하도록 설계되었습니다.
노력하다:
    start_index = html_chart.index ( '(function (vegaembed)')
    end_index = html_chart.index ( '}) (Vegaembed);') len ( '}) (Vegaembed);')

    # JavaScript 코드 추출 js_code = html_chart [start_index : end_index]

    print ( "추출 된 JavaScript 코드 스 니펫 :")
    인쇄 (js_code)

valueError를 제외하고 E :
    print (f "HTML 문자열에서 찾을 수없는 예상 자바 스크립트 코드 패턴 : {e}")
    인쇄 ( "Altair 버전 또는 생성 된 HTML 구조가 변경되었는지 확인하십시오.")

샘플 출력 (Data-Cmail Link Cleaned) :

 (기능 (Vegaembed) {
      var spec = { "config": { "view": { "continuousWidth": 400, "continuousHeight": 300}}, "data": { "url": "https://cdn.jsdelivr.net/npm/vega-datasets@data/jsonsson. { "color": { "field": "or "https://vega.github.io/schema/vega-lite/v5.2.0.json"};
      var embedopt = { "mode": "Vega-lite"};

      기능 샤워러 (EL, 오류) {
          el.innerhtml = ( '<div class="error" style="color : red;">'
                            '<p> javaScript 오류 :'error.message '</p>'
                            "<p> 이것은 일반적으로 차트 사양에 오타가 있음을 의미합니다."
                            "Full Traceback의 JavaScript 콘솔을 참조하십시오. </p>"
                            '</div>');
          던지기 오류;
      }
      const el = document.getElementById ( 'Vis');
      Vegaembed ( "#vis", spec, embedopt)
        .catch (error => 샤워러 (el, error));
    }) (Vegaembed);

3.3 독립형 JS 파일로 저장하십시오

추출 된 JavaScript 코드를 .js 파일에 저장하는 것은 매우 간단합니다. Python의 파일 쓰기 작업 만 사용하십시오.

 output_js_filename = 'mychart.js'
Open (output_js_filename, 'w', encoding = 'utf-8')으로 f :
    F.Write (js_code)

print (f "\ njavaScript 코드가 '{output_js_filename}'에 성공적으로 저장되었습니다.

4. 대상 컨테이너 ID를 수정하십시오

기본적으로 Altair가 생성 한 JavaScript 코드는 차트를 렌더링하기 위해 VIS의 ID가있는 HTML 요소를 찾습니다.

 const el = document.getElementById ( 'Vis');
Vegaembed ( "#vis", spec, embedopt)
  .catch (error => 샤워러 (el, error));

웹 페이지에서 다른 컨테이너 ID (예 : ID1)를 사용하려면 JavaScript 코드를 추출한 후 문자열 교체를 수행해야합니다.

# 이미 js_code string custom_id = 'myCustomChartContainer'가 있다고 가정합니다.
modified_js_code = js_code.replace ( "document.getElementByid ( 'Vis')", f "문서

위 내용은 Python Altair 차트에서 재사용 가능한 JavaScript 모듈 생성을위한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!