나의 문장에서 나는 이야기했다 Chart::Plotly.오늘, 우리는 다른javascript 라이브러리 amCharts 를 사용하여 비슷한 도표를 만들 것입니다.
나는amChartsv3와v4에서 일할 기회가 있다.v3는 현재 유지보수 모드에 있습니다.typescript에서 다시 쓰기.그 도서관의 장점 중 하나는 사이트에 많은 문서와 예시가 있다는 것이다.일반 자바스크립트에서 사용하거나 다양한 응용 프로그램 프레임워크에 통합할 수 있습니다. React, Angular 2+, Ember, Vue.js 등.
그리고 자바스크립트 전문가가 필요하지 않아도 사용할 수 있어요.그것은 고도로 배치할 수 있다.TypeScript/ES6, JavaScript 또는 JSON과 같은 모든 구문을 사용하여 구성할 수 있습니다.자세한 내용은 탁월함documentation을 참조하십시오.
우리 곧 시작합시다.

데이터 구성 만들기

우리는 본문과 완전히 같은 예시를 사용하여 다중 접선도를 만들어 보려고 한다.이번에는 데이터 형식을 조금 조정해 보겠습니다.

{
    "title": "Number of automobiles sold per day by manufacturer",
    "label": {
        "domainAxis": "Date",
        "rangeAxis": "Numbers of automobiles sold"
    },
    "data": [
        {
            "Date": "2020-04-15",
            "Honda": 10,
            "Toyota": 20,
            "Ford": 6,
            "Renault": 16
        },
        {
            "Date": "2020-04-16",
            "Honda": 3,
            "Toyota": 15,
            "Ford": 19,
            "Renault": 10
        },
        {
            "Date": "2020-04-17",
            "Honda": 5,
            "Toyota": 8,
            "Ford": 12,
            "Renault": 6
        },
        {
            "Date": "2020-04-18",
            "Honda": 9,
            "Toyota": 10,
            "Ford": 4,
            "Renault": 12
        }
    ]
}

우리가 이런 형식을 사용하는 이유는amCharts가 대상 그룹을 사용하여 도표를 만들기 때문입니다. 그 중에서 그룹의 모든 대상은 하나의 데이터 포인트를 대표합니다.추가 정보here.
우리는 모든 데이터 형식을 사용할 수 있지만, 최종적으로 무의미한 도표를 만들기 전에 대상 그룹으로 변환해야 한다. (특히 페이지를 불러올 때)그렇다면 왜 우리가 쉽게 사용할 수 있는 형식으로 데이터를 만들지 않는가.

모조 프로그램 만들기

우리는 서버 쪽에서 Mojolicious 프레임워크를 사용할 것이다.사이트에서 언급한 단일 명령을 사용하여 설치할 수 있습니다 -

$ curl -L https://cpanmin.us | perl - -M https://cpan.metacpan.org -n Mojolicious

그것도 우수하다documentation.한 번 보세요. 더 많은 정보를 얻을 수 있습니다.
내가 본문에서 사용한 판본은 9.14이다.
명령줄에서 프로그램을 계속 만들 것입니다.

$  mojo generate app MojoApp

이 명령은 MVC 응용 프로그램에 적합한 디렉토리 구조를 가진 예제 응용 프로그램을 생성합니다.간단한 완두
📦mojo 응용 프로그램
┣ 📂해방당
┃ ┣ 📂MojoApp
┃ ┃ ┗ 📂컨트롤러
┃ ┃ ┃ ┗ 📜예.오후.
┃ ┗ 📜MojoApp.오후.
┣ 📂공중의
┃ ┗ 📜색인html
┣ 📂각본
┃ ┗ 📜mojo 응용 프로그램
┣ 📂t
┃ ┗ 📜기본적t
┣ 📂거푸집
┃ ┣ 📂예.
┃ ┃ ┗ 📜어서 오세요.html.ep
┃ ┗ 📂배치
┃ ┃ ┗ 📜약속을 어기다.html.ep
┗ 📜mojo\u 응용 프로그램.yml
현재 디렉터리에 들어가서 이 프로그램을 실행하려고 시도합니다.

$ morbo ./script/mojo_app
Web application available at http://127.0.0.1:3000

브라우저를 열고 http://localhost:3000/를 클릭하면 환영 페이지를 볼 수 있습니다.MojoApp.pm를 열고 보면 get(홈페이지)의 / 요청이 example 컨트롤러(Example.pm)로 리셋되고 이 컨트롤러에서 함수welcome를 호출하여 요청을 완성할 수 있습니다.템플릿example/welcome.html.ep이 클릭http://localhost:3000/에 나타나는 함수도 볼 수 있습니다
우리는 우리의 수요를 만족시키기 위해dir구조의 일부분을 추가/수정할 것이다.

"mojo app/etc/"디렉터리를 만들어서 "입력 데이터"를 놓을 것입니다.이전에 만든 json입니다.

기본 컨트롤러example를 의미 있는 컨트롤러

로 변경합니다.

템플릿도 수정layouts\default.html.ep합니다.

템플릿에amChartsjavascript 라이브러리를 추가합니다.

MojoApp을 업데이트합니다.startup에서 다음과 같이 변경된pm-

    # Normal route to controller
    $r->get('/')->to('charts#create_multi_line_chart');

새 또는 이름 바꾸기 예시를 만듭니다.오후부터 도표까지.pm inController 병용-

package MojoApp::Controller::Charts;
use Mojo::Base 'Mojolicious::Controller', -signatures;
use Mojo::JSON qw(decode_json encode_json);

sub read_json_file ($self, $json_file) {

    open(my $in, '<', $json_file) or $self->app->log->error("Unable to open file $json_file : $!");
    my $json_text = do { local $/ = undef; <$in>; };
    close($in) or $self->app->log->error("Unable to close file : $!");

    my $config_data = decode_json($json_text);
    return $config_data;
}

sub create_multi_line_chart ($self) {
    my $data_in_json = $self->read_json_file( "etc/input_data.json");

    $self->render(template => 'charts/multi_line_chart', chart_data => encode_json($data_in_json));
}

1;

여기에서 우리는 입력 json 파일을 읽고 그래프 데이터로 템플릿을 보여 줍니다.페이지를 로드할 때마다 호출됩니다create_multi_line_chart.여기서 나는 매번 서류를 읽는다.이런 상황에서 너는 한 번에 데이터를 읽을 수도 있고, 한 번에 데이터를 읽을 수도 있다.
JSON 파일은 단지 하나의 예일 뿐이다.너도 데이터베이스에서 이 데이터를 얻을 수 있다.
MVC 프레임워크를 논의한 이상 왜 이 데이터 논리를 Model로 옮기지 않았을까.
생성lib\MojoApp\Model\Data.pm 및 사용

package MojoApp::Model::Data;

use strict;
use warnings;
use experimental qw(signatures);
use Mojo::JSON qw(decode_json);

sub new ($class) {
    my $self = {};
    bless $self, $class;
    return $self;
}

sub _read_json_file ($self, $json_file) {
    open(my $in, '<', $json_file) or $self->app->log->error("Unable to open file $json_file : $!");
    my $json_text = do { local $/ = undef; <$in>; };
    close($in) or $self->app->log->error("Unable to close file : $!");

    my $config_data = decode_json($json_text);
    return $config_data;
}

sub get_data ($self) {
    my $data_in_json = $self->_read_json_file("etc/input_data.json");

    return $data_in_json;
}

1;

마찬가지로 DB에 연결하여 데이터를 생성할 수 있습니다.간단하게 보기 위해서, 나는 단지 JSON 파일에서 데이터를 얻었을 뿐이다.(이 데이터는 실제로CouchDB:P에서 생성된 것이다).
MojoApp에서 업데이트합니다startup.오후.

use MojoApp::Model::Data;

sub startup ($self) {

...
    # Helper to lazy initialize and store our model object
    $self->helper(
        model => sub ($c) {
            state $data = MojoApp::Model::Data->new();
            return $data;
        }
    );
...

}

컨트롤러 그래프에서 추가 내용을 삭제합니다.pm과 이 조수를 사용하세요.

package MojoApp::Controller::Charts;
use Mojo::Base 'Mojolicious::Controller', -signatures;
use Mojo::JSON qw(encode_json);

sub create_multi_line_chart ($self) {
    my $data_in_json = $self->model->get_data();

    $self->render(template => 'charts/multi_line_chart', chart_data => encode_json($data_in_json));
}

1;

데이터 모델을 사용하고 템플릿을 보여주기 위해 컨트롤러를 업데이트했습니다.
이제 template 섹션으로 이동하여 폴더 이름charts을 업데이트/만들고, 템플릿multi_line_chart.html.ep을 만들겠습니다.default.html.ep 템플릿도 살짝 업데이트하겠습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title><%= title %></title>

        %= content 'head'
    </head>
    <body>
        <div>
            %= content
        </div>
        %= content 'end'
    </body>
</html>

이것은 우리의 레이아웃 템플릿입니다. 우리는 전체 사이트의 모든 페이지에서 그것을 사용할 것입니다.우리는 서로 다른 자리 차지 문자에서 서로 다른 페이지의 데이터를 생성할 것이다.자세한 내용은 Mojolicious::Guides::Rendering 및 Mojo::Template를 참조하십시오.
다선도에서.html.ep

% layout 'default';
% title 'Charts';

% content_for 'head' => begin
    <link rel="stylesheet" type="text/css" href="css/charts.css">
% end

<div id="chartdiv"></div>

% content_for 'end' => begin
    %= javascript "https://cdn.amcharts.com/lib/4/core.js"
    %= javascript "https://cdn.amcharts.com/lib/4/charts.js"
    %= javascript "https://cdn.amcharts.com/lib/4/themes/animated.js"

    %= javascript "js/multi_line_chart.js"

    %= javascript begin
        createMultiLineChart(<%== $chart_data %>);
    % end
% end

간단한 언어로 default.html.ep 템플릿을 사용하여 페이지 제목을 '도표' 로 업데이트하고 head 부분을 이 페이지의 css에 추가합니다. 페이지 주체에 'id' chartdiv 가 있는'div '를 만들고 주체의 끝에 언급된javascripts 파일을 추가합니다.
자바스크립트에서 사용한 $chart_data 방법은 create_multi_line_chart 방법에서 템플릿을 나타낼 때 서버에서 전달됩니다.이것은 JSON으로 인코딩된 것으로 클라이언트에서 인코딩합니다.
포함된 세 개의 자바스크립트는amCharts 라이브러리입니다.
이제 charts.css 과 multi_line_chart.js 을 만듭니다. 여기에서 인용합니다.이것들은 '공공' 디렉터리에서 자동으로 제공될 것이다.
년public/css/charts.css

#chartdiv {
    width: 850px;
    height: 550px;
}

그것은 매우 작아서 우리는 도표의 차원만 설정할 수 있다.
년public/js/multi_line_chart.js

function createSeries(chart, axis, field, name) {
    // Create series
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.dateX = "Date";
    series.dataFields.valueY = field;
    series.strokeWidth = 2;
    series.xAxis = axis;
    series.name = name;
    series.tooltipText = "{name}: [bold]{valueY}[/]";

    var bullet = series.bullets.push(new am4charts.CircleBullet());

    return series;
}

function createMultiLineChart(chartData) {
    // Themes begin
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("chartdiv", am4charts.XYChart);

    // Increase contrast by taking every second color
    chart.colors.step = 2;
    // Add title to chart
    var title = chart.titles.create();
    title.text = chartData["title"];

    // Add data to chart
    chart.data = chartData["data"];

    // Create axes
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.title.text = chartData["label"]["domainAxis"];

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.title.text = chartData["label"]["rangeAxis"];

    //var single_data_item = chartData["data"][0];
    var series1 = createSeries(chart, dateAxis, "Toyota", "Toyota");
    var series2 = createSeries(chart, dateAxis, "Ford", "Ford");
    var series3 = createSeries(chart, dateAxis, "Honda", "Honda");
    var series4 = createSeries(chart, dateAxis, "Renault", "Renault");

    // Add legend
    chart.legend = new am4charts.Legend();

    // Add cursor
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.xAxis = dateAxis;

    // Add scrollbar
    chart.scrollbarX = new am4core.Scrollbar();

    // Add export menu
    chart.exporting.menu = new am4core.ExportMenu();
}

나는 이미 묘사에 주석을 추가했다.자세한 내용은 reference 및 xy-chart를 참조하십시오.
여기에 생성된 함수 createMultiLineChart 는 우리가 호출하고 있는 함수 multi_line_chart.html.ep 이다.
홈 페이지를 저장하고 새로 고칩니다.

기본 설정을 사용해 보았습니다.위의 캡처는 실제 동적 도표에 제 역할을 하지 못했다.그러기 위해서, 너는 반드시 스스로 뛰어가서 보아야 한다.
이제 더 많은 설정을 사용해서 수정을 시도해 봅시다. public/js/multi_line_chart.js앞서 언급한 바와 같이 고도로 배치되어 있어 모든 것을 포괄하기 어려우므로 가능한 한 모든 내용을 포괄할 것입니다.

function createSeries(chart, axis, field, name) {
    // Create series
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.dateX = "Date";
    series.dataFields.valueY = field;
    //series.dataFields.categoryX = "Date";
    series.strokeWidth = 2;
    series.xAxis = axis;
    series.name = name;
    series.tooltipText = "{name}: [bold]{valueY}[/]";
    //series.fillOpacity = 0.8;

    // For curvey lines
    series.tensionX = 0.8;
    series.tensionY = 1;

    // Multiple bullet options - circle, triangle, rectangle etc.
    var bullet = series.bullets.push(new am4charts.CircleBullet());
    bullet.fill = new am4core.InterfaceColorSet().getFor("background");
    bullet.fillOpacity = 1;
    bullet.strokeWidth = 2;
    bullet.circle.radius = 4;

    return series;
}

function createMultiLineChart(chartData) {
    // Themes begin
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("chartdiv", am4charts.XYChart);

    // Increase contrast by taking every second color
    chart.colors.step = 3;
    //chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

    // Add title to chart
    var title = chart.titles.create();
    title.text = chartData["title"];
    title.fontSize = 25;
    title.marginBottom = 15;

    chart.data = chartData["data"];

    // Create axes - for normal Axis
    // var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    // categoryAxis.dataFields.category = "Date";
    // categoryAxis.renderer.grid.template.location = 0;

    // Create axes - for Date Axis
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    //dateAxis.dataFields.category = "Date";
    dateAxis.renderer.grid.template.location = 0;
    dateAxis.renderer.minGridDistance = 50;
    dateAxis.title.text = chartData["label"]["domainAxis"];

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    //valueAxis.renderer.line.strokeOpacity = 1;
    //valueAxis.renderer.line.strokeWidth = 2;
    valueAxis.title.text = chartData["label"]["rangeAxis"];

    var series1 = createSeries(chart, dateAxis, "Toyota", "Toyota");
    var series2 = createSeries(chart, dateAxis, "Ford", "Ford");
    var series3 = createSeries(chart, dateAxis, "Honda", "Honda");
    var series4 = createSeries(chart, dateAxis, "Renault", "Renault");

    // Add legend
    chart.legend = new am4charts.Legend();

    // Add cursor
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.xAxis = dateAxis;

    // Add scrollbar
    chart.scrollbarX = new am4core.Scrollbar();

    // Add export menu
    chart.exporting.menu = new am4core.ExportMenu();
}

이제 출력을 다시 시도해 보겠습니다 -

이전보다 좀 낫다.오른쪽 상단의 세 점은 png이나svg 형식의 이미지를 다운로드하거나 JSON이나 CSV 형식의 데이터를 가져오거나 도표를 인쇄하는 등 더 많은 상호작용 옵션을 제공합니다.
체험을 강화할 수 있는 플러그인도 있다.자세한 내용은 Plugins를 참조하십시오.
내가 언급한 바와 같이, 많은 설정 옵션이 있지만, 나는 없다
이 모든 것을 포괄했다.그러나 다음 호에서 그것을 소개하려고 합니다. React에서 같은 도표를 만들 것입니다.js는 Typescript/ES6을 사용합니다.또한 위의 js 파일을 수정하여 모든 종류의 다중 접선도 (특히 "createSeries"호출) 에 적용할 수 있습니다.나는 그것을 연습으로 삼을 것이다.
위의 예는 github에서 확인할 수 있습니다.
Perl 양파 로고here
Mojolicous 로고 추출here
amCharts 플래그가 형성됨here