webix로 간단한 차트를 만듭니다

키 테이크 아웃

webix 프레임 워크는 Open-Source JavaScript Gantt 차트 DHTMLXGantt와 함께 사용하여 사용자 정의 Gantt 차트 응용 프로그램을 작성할 수 있습니다. 이 조합은 프로젝트의 작업 프로세스를 시각화 할 수 있으며 수출 및 사용자 정의 가능한 시간 규모와 같은 기능을 제공합니다. 기본 간트 차트의 생성에는 DHTMLXGantt 라이브러리 패키지를 다운로드하고 "CodeBase"폴더를 프로젝트 디렉토리로 추출하는 것과 관련이 있습니다. 그런 다음 차트는 작업 및 링크를 포함한 데이터로 JavaScript 객체로 표시 될 수 있습니다. webix UI 구성 요소를 사용하여 Gantt 차트에 추가 제어를 추가 할 수 있습니다. 예를 들어, 메뉴 버튼을 추가하여 차트를 다른 파일 형식으로 내보낼 수 있으며 차트 규모를 변경할 수 있도록 도구 모음을 포함시킬 수 있습니다. 최종 제품은 가벼운 온라인 차트 제작 도구로 광범위한 기능을 수행 할 수 있습니다. 차트의 소스 코드와 데모는 Github에서 찾을 수 있습니다.

이전 기사에서는 webix 프레임 워크를 소개했습니다. 기본 기능을 발견하고 매우 잘 보이는 반응 형 웹 응용 프로그램을 만드는 방법을 배웠습니다. 이제 조금만 앞으로 나아가서이 유망한 프레임 워크로 우리가 할 수있는 일을 볼 차례입니다.

이 기사에서는 자신의 간트 차트 응용 프로그램을 작성 하고이 작업을 완료하는 방법을 보여 드리겠습니다. webix 프레임 워크를 오픈 소스 JavaScript Gantt 차트와 함께 dhtmlxgantt. 그러나 Gantt 차트가 왜 물어볼 수 있는지. 의심 할 여지없이 그것은 많은 전문가가 있습니다. 첫째,이 차트는 직관적 인 표현 방식으로 인해 프로젝트의 작업 프로세스를 시각화하는 데 널리 사용됩니다. 둘째, DHTMLXGANTT는 내보내기, 사용자 정의 가능한 시간 규모 등과 같은 큰 기능 목록을 보유한 Gantt 차트 도구입니다. 마지막으로 Webix Developer의 블로그에서 webix 웹 앱에서 Dhtmlx Gantt 차트라는 게시물을 찾았으며 코드 줄이 거의없는 Gantt 차트를 webix 응용 프로그램에 추가 할 수 있음이 밝혀졌습니다. 그래서 나는 그들이 잘 맞을 수 있다고 생각했습니다.

도움이 필요할 수 있다면, 단계별 가이드도 많이 제공되므로 의심스러운 경우 자유롭게 사용할 수 있습니다.
• . 기본 간트 차트 생성 이제 응용 프로그램을 만들어 봅시다. 먼저 기본 차트를 살펴 보겠습니다. 그런 다음 기능을 향상시키기 위해 몇 가지 기능을 추가합니다 파일 준비 우선 DHTMLXGANTT 라이브러리 패키지를 다운로드하고 "CodeBase"폴더를 프로젝트 디렉토리로 추출해야합니다. dhtmlxgantt를 사용한 ntegration은 내장 된 webix 기능이 아니므 로이 Github 저장소에서 필요한 파일을 다운로드해야합니다. 우리는 프로젝트 디렉토리에 배치 해야하는 "Gantt"디렉토리에 관심이 있습니다.

  Webix CDN을 사용하여 프로젝트에 webix를 포함했지만 원하는 경우 전체 라이브러리를 다운로드 할 수 있습니다. 또한 내보내기 기능을 사용할 수있는 API.JS 파일이 필요합니다.

  그래서, 여기에 내 index.html 파일이 있습니다 :

  일단 완료되면 기본 간트 차트를 만들 수 있습니다 간트 차트 초기화 이 차트는 데이터베이스를 사용하여 데이터를 저장할 수있는 가능성을 제공합니다 (문서 페이지를 확인하여 작동 방식을 확인할 수 있음). 그러나 실험을 위해서는 인라인 데이터를 예제로 사용하여 JavaScript 부분에 중점을 둘 것입니다. n이 튜토리얼은 컨텐츠가 동등한 JavaScript 객체로 변환 된 두 번째 튜토리얼의 사용을 척합니다.
  속성에 대해 논의 해 봅시다. DatapRoperty에는 작업 이름, ID, 시작 날짜, 현재 시간 척도 단위 (기본적으로 일수) 및 현재 진행 상황 (0에서 1까지의 숫자)에 표시된 작업 시간에 대한 작업 설명이 포함됩니다. 또한 작업 지점이 열려 있는지 여부를 정의하는 오픈 속성과 부모 작업을 정의하는 것이 목표 인 부모 속성도 포함됩니다. 링크 매개 변수는 종속성 링크를 정의하며 다음 값으로 구성됩니다. 작업 ID, 대상 1에 의존하는 소스 작업 및 종속성 유형 (0 - 'finish to start', 1 - 'start to start', 2 - '마무리 마무리').

  이제이 데이터로 차트를 초기화 할 수 있습니다

  view :"Dhx-Gantt "는이 경우 UI 구성 요소 유형, Gantt 차트를 정의합니다. 초기 속성에는 초기화 전에 실행되는 함수가 포함되어 있습니다. Order_Branch 옵션을 사용하여 드래그 앤 드롭 작업 재정렬을 활성화했습니다. 준비 속성은 구성 요소가 완전히로드 될 때 트리거되는 함수를 정의합니다. 우리의 경우 Gantt.parse () 메소드를 사용하여 이전에 생성 된 데이터로 차트를 초기화합니다. 결과는 다음과 같습니다

  그래서 우리는 어떤 기능을 가지고 있습니까? 기존 작업 종속성을 재정의하고 새 작업 종속성을 만들 수 있습니다. 작업의 가장자리에서 원을 드래그하여 수행 할 수 있습니다. 바닥의 ​​삼각형으로 진행 상태를 변경할 수 있습니다. 작업 시작 시간은 작업을 수평 방향으로 드래그하여 변경할 수 있습니다. 기간에 관해서는 작업을 조정하여 설정할 수 있습니다. “”버튼을 사용하여 새로운 작업과 하위 작업을 추가 할 수 있습니다.

  <span><span><span>></span>
  </span>   <span><span><span><title>></title></span>Webix Gantt Chart<span><span></span>></span>
  </span>   <span><!--Webix-->
  </span>   <span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
  </span>   <span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span> /></span>
  </span>   <span><!--dhtmlxGantt-->
  </span>   <span><span><span><script> src<span >="codebase/dhtmlxgantt.js"</script></span>></span><span><span></span>></span>
  </span>   <span><span><span><link> href<span>="codebase/dhtmlxgantt.css"</span> rel<span>="stylesheet"</span> /></span>
  </span>   <span><!--dhtmlxGantt integration-->
  </span>   <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="./gantt/gantt.js"</span>></span><span><span></span>></span>
  </span>   <span><!--export-->
  </span>   <span><span><span><script> src<span >="http://export.dhtmlx.com/gantt/api.js"</script></span>></span><span><span></span>></span>
  </span><span><span><span></span>></span></span></span></span></span></span>

  다음은 새로운 작업 창출이 어떻게 보이는지입니다 이 시점에서 우리는 차트를 만들 수 있지만 그것을 조작 할 방법은 없습니다. 따라서이 목적을 위해 몇 가지 컨트롤을 추가해 봅시다.

  webix로 더 많은 제어 우리는 일부 webix UI 구성 요소를 사용하여 차트를 제어 할 것입니다. “내보내기…”메뉴 버튼 지저분한 코드를 피하기 위해 레이아웃 코드에서 UI 구성 요소 초기화를 분리하기로 결정했습니다.

  첫째, 메뉴 버튼을 정의하여 차트를 다른 파일 형식으로 내보낼 수 있습니다. 이를 위해 webix 메뉴 구성 요소를 사용합니다.

  메뉴 설명은 다음과 같습니다

  기본적으로 마우스가 마우스를 떠날 때 메뉴 버튼이 활성화됩니다. OpenAction : "클릭"속성은이 동작을 재정의하므로 메뉴는 마우스 클릭으로 만 하위 메뉴를 열게됩니다. 데이터 매개 변수는 메뉴 컨텐츠를 정의합니다. 흥미로운 점은 유형입니다 : "아이콘"속성은 메뉴 버튼에 아이콘을 추가 할 수 있습니다. Webix는 Font Awesome Icons Collection을 사용합니다. 원하는 아이콘을 적용하려면 아이콘 이름을 아이콘 매개 변수의 값으로 사용해야합니다.

  다음 단계는 이벤트 처리입니다. 메뉴 항목 중 하나를 클릭하면 onitemClick 이벤트가 발생합니다. Switch 문을 사용하여 선택한 ID 값을 처리하므로 특정 파일 형식에 어떤 메소드가 사용되는지 확인할 수 있습니다. 하위 메뉴 매개 변수에는 메뉴 항목 정의가 포함되어 있습니다 도구 모음 우리는 툴바를 페이지 하단에 배치합니다. 메뉴 버튼을 포함한 제어 요소가 포함됩니다.

  도구 모음 구성 요소가 우리를 도울 것입니다. 그러나 전에 추가해야 할 옵션을 정의해 봅시다. 지속 시간이 충분한 프로젝트를 관리하려면 스케일 변경 기능에 대해 생각해야합니다. dhtmlxgantt는 다양한 다양한 스케일 특성을 제공합니다. 우리는 낮, 주 및 월 척도를 사용합니다.

  달 척도를 활성화 할 함수를 정의하자 :

  scale_unit 속성은 스케일 단위를 정의합니다. 가능한 값은 "Minute", "Hour", "Day", "Week", "Quarter", "Month"및 "Year"입니다. 적절한 형식의 시간 척도를 설정하기 위해 Date_Scale 속성을 사용했습니다. 그 후 우리는 Gantt.parse (작업)로 차트를 새로 고침해야합니다.

  이 기능을 사용한 후 차트의 모습은 다음과 같습니다.

  다른 스케일 기능은 비슷한 방식으로 예쁘게 작동하므로 설명하지 않을 것입니다.

  . 이제 도구 모음 변수를 정의 할 수 있습니다 :

  <span><span><span>></span>
  </span>   <span><span><span><title>></title></span>Webix Gantt Chart<span><span></span>></span>
  </span>   <span><!--Webix-->
  </span>   <span><span><span><script> src<span >="http://cdn.webix.com/edge/webix.js"</script></span>></span><span><span></span>></span>
  </span>   <span><span><span><link> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span> /></span>
  </span>   <span><!--dhtmlxGantt-->
  </span>   <span><span><span><script> src<span >="codebase/dhtmlxgantt.js"</script></span>></span><span><span></span>></span>
  </span>   <span><span><span><link> href<span>="codebase/dhtmlxgantt.css"</span> rel<span>="stylesheet"</span> /></span>
  </span>   <span><!--dhtmlxGantt integration-->
  </span>   <span><span><span><script> type<span >="text/javascript"</script></span> src<span>="./gantt/gantt.js"</span>></span><span><span></span>></span>
  </span>   <span><!--export-->
  </span>   <span><span><span><script> src<span >="http://export.dhtmlx.com/gantt/api.js"</script></span>></span><span><span></span>></span>
  </span><span><span><span></span>></span></span></span></span></span></span>

  이전에 생성 된 메뉴와 비슷해 보입니다. Paddingy 속성은 상단 및 하단 패딩 값을 0으로 설정합니다. 요소 속성은 메뉴 예제의 데이터 속성과 마찬가지로 도구 모음 컨텐츠를 정의합니다. 툴바의 첫 번째 요소는 우리의 메뉴이고 두 번째 요소는 세그먼트 된 버튼입니다. 이 예제의 스케일 단위와 같은 사용 가능한 값을 전환하려는 경우 유용합니다. 하나의 이벤트 핸들러가 사용자의 선택을 관리하는 데 사용되었지만 이번에는 Onchange 이벤트입니다. 현재 선택된 버튼이 변경된 후에 발사됩니다. 이전에 정의 된 기능은 선택한 버튼 ID에 따라 스케일을 변경합니다. 옵션 속성은 컨트롤 내의 버튼 (세그먼트)을 정의합니다.

  마지막으로, 이제 도구 모음을 차트에 추가 할 차례입니다. 이렇게하려면 레이아웃 코드에 도구 모음 변수를 추가하십시오.

  결과는 다음과 같습니다

  우리의 차트는 이제 확장 가능합니다. 메뉴 아이콘은 사용자가 자신의 선택을하는 데 도움이됩니다. 결론 이 기사에서는 DHTMLXGantt 기반 Gantt 차트 앱을 구축하고 전체 기간에 따라 적절한 규모를 설정하고 추가 요구를 위해 파일로 내보내는 방법을 보았습니다. 우리가 가진 것은 가벼운 온라인 차트 제작 도구입니다.

  현재는 웨브스와 현재 dhtmlxgantt의 통합에 관한 기사가 있습니다. 그러나이 게시물에 따르면 Webix UI - Gantt Pro의 사용 사례에 따르면 최근 webix는 고급 온라인 Gantt 차트 앱인 GanttPro를 만드는 데 사용되었습니다. 따라서 게시물에 설명 된 기능 및 UI 구성 요소를 사용하면 Gantt 차트 기능을 상당히 확장 할 수 있다고 생각합니다. 소스 코드와 데모를 확인하려면이 GitHub 페이지를 방문 할 수 있습니다.

  <span>var tasks = {
  </span>   <span>data: [{
  </span>         <span>id: 1,
  </span>         <span>text: "Project #1",
  </span>         <span>start_date: "01-06-2015",
  </span>         <span>duration: 11,
  </span>         <span>progress: 0.6,
  </span>         <span>open: true
  </span>      <span>}, {
  </span>         <span>id: 2,
  </span>         <span>text: "Task #1",
  </span>         <span>start_date: "03-06-2015",
  </span>         <span>duration: 5,
  </span>         <span>progress: 1,
  </span>         <span>open: true,
  </span>         <span>parent: 1
  </span>      <span>},
  </span>      <span>/*some more tasks*/
  </span>      <span>{
  </span>         <span>id: 6,
  </span>         <span>text: "Task #2.3",
  </span>         <span>start_date: "05-06-2015",
  </span>         <span>duration: 4,
  </span>         <span>progress: 0.2,
  </span>         <span>open: true,
  </span>         <span>parent: 3
  </span>      <span>}
  </span>   <span>],
  </span>   <span>links: [{
  </span>         <span>id: 1,
  </span>         <span>source: 1,
  </span>         <span>target: 2,
  </span>         <span>type: "1"
  </span>      <span>}, {
  </span>         <span>id: 2,
  </span>         <span>source: 1,
  </span>         <span>target: 3,
  </span>         <span>type: "1"
  </span>      <span>},
  </span>      <span>/*some more links*/
  </span>      <span>{
  </span>         <span>id: 5,
  </span>         <span>source: 5,
  </span>         <span>target: 6,
  </span>         <span>type: "0"
  </span>      <span>}
  </span>   <span>]
  </span><span>};</span>

  webix로 자신의 간트 차트 생성에 대한 자주 묻는 질문 (FAQ) webix에서 Gantt 차트의 모양을 사용자 정의 할 수 있습니까?

  webix는 Gantt 차트에 대한 다양한 사용자 정의 옵션을 제공합니다. 막대, 텍스트 및 그리드 라인의 색상, 크기 및 스타일을 변경할 수 있습니다. 라벨, 툴팁 및 범례를 추가 할 수도 있습니다. 모양을 사용자 정의하려면 JavaScript 코드에서 Gantt 차트 객체의 속성을 수정해야합니다. 예를 들어, 막대의 색상을 변경하려면 '색상'속성을 사용할 수 있습니다. CSS를 사용하여 Gantt 차트의 모양을 추가로 사용자 정의 할 수 있습니다.

  내 Gantt 차트의 작업간에 종속성을 추가 할 수 있습니까?

  예, Gantt 차트의 작업간에 종속성을 추가 할 수 있습니다. webix에서. 종속성은 작업의 막대를 연결하는 라인으로 표시됩니다. 종속성을 추가하려면 데이터의 작업에 대해 '종종 _on'속성을 지정해야합니다. 이 속성의 값은 그 자산의 값이 의존하는 작업의 ID 여야합니다. 이렇게하면 종속 작업에서 의존하는 작업으로의 선을 자동으로 그립니다. Gantt 차트에서 많은 양의 데이터를 처리 할 수있는 방법은 무엇입니까?

  webix는 Gantt 차트에서 많은 양의 데이터를 처리 할 수있는 몇 가지 기능을 제공합니다. '페이징'기능을 사용하여 데이터를 페이지로 나눌 수 있습니다. 이를 통해 한 번에 관리 가능한 양의 데이터를 표시 할 수 있습니다. '필터링'기능을 사용하여 특정 기준을 충족하는 데이터 만 표시 할 수도 있습니다. 특정 작업에 집중하려면 유용 할 수 있습니다.

  Gantt 차트를 PDF 또는 이미지 파일로 내보낼 수 있습니까?

  예, Gantt 차트를 PDF 또는 PDF로 내보낼 수 있습니다. webix의 이미지 파일. 차트를 다른 사람과 공유하거나 보고서에 포함시키려는 경우 유용 할 수 있습니다. 차트를 내보내려면 Gantt 차트 객체의 'ExportTopDF'또는 'ExportTopng'메소드를 사용해야합니다. 이렇게하면 다운로드 할 수있는 차트의 PDF 또는 PNG 파일이 생성됩니다.

  Gantt 차트에 상호 작용을 추가하려면 어떻게해야합니까?

  webix는 Gantt 차트에 상호 작용을 추가하는 몇 가지 기능을 제공합니다. 이벤트 리스너를 추가하여 막대를 클릭하거나 드래그하는 것과 같은 사용자 작업에 응답 할 수 있습니다. 또한 '편집 가능한'속성을 사용하여 사용자가 차트에서 직접 작업을 편집 할 수 있습니다. 사용자가 작업 진행 상황을 업데이트 할 수있게하려면 유용 할 수 있습니다.

  webix를 사용하여 모바일 앱에서 Gantt 차트를 만들 수 있습니까?
  예, webix를 사용할 수 있습니다. 모바일 앱에서 Gantt 차트를 만듭니다. webix는 JavaScript 라이브러리이므로 JavaScript를 지원하는 모든 플랫폼에서 사용할 수 있습니다. 여기에는 iOS 및 Android와 같은 모바일 플랫폼이 포함됩니다. Gantt 차트는 장치의 화면 크기에 자동으로 적응합니다.
  Gantt 차트에 이정표를 추가하려면 어떻게해야합니까?

  작업을 작성하여 webix의 Gantt 차트에 이정표를 추가 할 수 있습니다. 0의 지속 시간. 이 작업은 차트에서 다이아몬드로 표시됩니다. 이정표를 만들려면 작업의 'start_date'및 'end_date'속성을 동일하게 지정해야합니다. 이렇게하면 기간이 0 인 작업이 생성됩니다.이 작업은 이정표로 표시됩니다.

  webix를 사용하여 여러 타임 라인이있는 Gantt 차트를 만들 수 있습니까?
  예, webix를 사용할 수 있습니다. 여러 타임 라인이있는 간트 차트를 만듭니다. 이것은 다른 수준의 세부 사항 또는 프로젝트의 다른 측면을 표시하려는 경우 유용 할 수 있습니다. 여러 타임 라인을 만들려면 작업의 '하위 작업'속성을 사용해야합니다. 이를 통해 각각 고유 한 타임 라인을 갖춘 작업 계층 구조를 만들 수 있습니다.
  Gantt 차트에 리소스를 추가 할 수 있습니까?

  생성하여 webix에서 Gantt 차트에 리소스를 추가 할 수 있습니다. '자원'속성이있는 작업. 이 속성은 이름 및 용량과 같은 리소스의 세부 사항을 포함하는 개체 여야합니다. 리소스는 차트에 작업 옆의 레이블로 표시됩니다. 웹 응용 프로그램에서 gantt 차트를 만들기 위해 webix를 사용 할 수 있습니까? 예, webix를 사용하여 웹 응용 프로그램에서 Gantt 차트를 만들 수 있습니다. webix는 JavaScript 라이브러리이므로 JavaScript를 지원하는 모든 플랫폼에서 사용할 수 있습니다. 여기에는 HTML5 및 CSS3과 같은 웹 플랫폼이 포함됩니다. Gantt 차트는 장치의 화면 크기에 자동으로 적응합니다.

위 내용은 webix로 간단한 차트를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!