疫病の流行中、さまざまなアプリケーションシステムとビッグデータシステムが疫病の予防と闘いに大きな助けをもたらしました。国立博物館は、このコードをコレクションとして初めて公開した。これは、アリのプログラマーによって書かれたコードの最初の行と、感染症との闘い中に研究開発担当者の署名が含まれたものだ。これは、疫病に直面して勇敢な「反逆者」となり、「流行病」との戦いに貢献するよう努めるという大多数のプログラマーの職業的責任を示しています。責任の精神は、新時代の中国精神の重要な部分です。疫病との戦いでは、全国の人民が手を携えて実際の行動で疫病と闘い、中華民族の責任精神を示した。私たちは、疫病との闘いで示された新しい時代の責任精神を学び、道徳的資質を向上させ、責任意識を養い、知識学習を強化し、責任を負う能力を養い、社会的実践に注意を払い、精神を養わなければなりません。責任を取る能力、そして感染症流行における責任の精神それは心の中に内面化され、行動として外面化される。

1 事例紹介

この章では、ECMAScript、BOM、DOM、および Ajax の知識を包括的に使用して、図 11-5 に示す EChart に基づくリアルタイム流行監視システムを実現します。

2 ケーススタディ

リアルタイム流行監視システムは以下のモジュールに分かれています: リアルタイム、世界のリアルタイム新型クラウンワクチン接種データ、国家リアルタイム流行追跡、中国の累積ワクチン接種傾向、中国の100人当たりのワクチン接種傾向、流行マップ、国内の既存感染者数トップ10、リスク地域。第 10 章では、Ajax テクノロジーを使用して Tencent サーバーから流行データを取得する方法をすでに紹介しましたが、この章の主な作業は、流行データを処理し、ECharts の折れ線グラフ、円グラフ、およびデータマップを通じてデータを視覚化することです。

JavaScriptのコードを書き始める前に、使用する外部jsファイルを格納するフォルダ、CSSファイルを格納するフォルダ、素材を格納するフォルダを作成し、次にindex.htmlファイルとindex.jsファイルを新規作成します。echarts.min.js、china.js、jquery.min.js、index.js を含むすべての js ファイルを Web ページファイルindex.html に導入します。

サンプルコードは次のとおりです。

<body>
    //此处省略其他html代码
<script src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body>

3ページのレイアウト

図 11-6 に示すように、データ表示ページを 9 つの領域に分割できます。ページ領域の分割は一意ではなく、読者が自分で分割することができます。HTML および CSS コードについては、サポートされているソースコードを参照してください。

図 11-6 ページレイアウト図

4 リアルタイムモジュール

組み込みオブジェクト Date によって提供される toLocaleString() メソッドを使用して、時刻を表示用のネイティブ形式に変換します。タイマーメソッドを使用して、関数を 1 秒ごとに実行して最新の時刻を取得します。サンプルコードは次のとおりです。

function showTime(){       
    //获取页面中时间显示区域，并将内容赋值为当前时间的本地格式
    document.querySelector('#kyjs-wrap .time').innerText = (new Date()).toLocaleString();
}
showTime();//先执行一次函数，显示当前时间
setInterval(showTime,1000); //每隔一秒执行一次函数

上記のコードは、図 11-7 に示すような効果を実現します。

図 11-7 リアルタイム

5 世界の新しいクラウンワクチンのリアルタイムワクチン接種データモジュール

ページ上の指定された位置にデータをレンダリングします。サンプルコードは次のとおりです。

 1 //渲染全球累计接种数据
 2 document.getElementById('world-all').innerHTML = f(data.VaccineTopData.全球.total_vaccinations);
 3 //渲染全球较上日新增数据
 4 document.getElementById('world-add').innerHTML = f(data.VaccineTopData.全球.new_vaccinations);
 5 //渲染全球每百人接种数据
 6 document.getElementById('world-per').innerHTML = f(data.VaccineTopData.全球.total_vaccinations_per_hundred);
 7 //渲染中国累计接种数据
 8 document.getElementById('china-all').innerHTML = f(data.VaccineTopData.中国.total_vaccinations);
 9 document.getElementById('china-add').innerHTML = f(data.VaccineTopData.中国.new_vaccinations);//渲染中国较上日新增数据
 10 //渲染中国每百人接种数据
 11 document.getElementById('china-per').innerHTML = f(data.VaccineTopData.中国.total_vaccinations_per_hundred);
 12 function f(value){//数量过亿转换为以亿计量，过万转换为以万计量
 13     if (value >= 100000000) {
 14         return (value / 100000000).toFixed(1) + "<span>亿剂<\/span>";
 15                   	 }
 16     else if (value >= 10000){		
 17         return (value / 10000).toFixed(1) + "<span>万剂<\/span>";
 18     }
 19     else 
 20         return value+ "<span>剂<\/span>";
 21 }

上記のコードの 1 行目から 11 行目は、Ajax によって取得された新しいクラウンワクチンのグローバルなリアルタイムワクチン接種データをページの対応する位置に表示します。データ量が多いため、表示する際、カプセル化関数 f() により、ワクチン数が 1 億回分を超える場合は「1 億回分」に、1 万回分を超える場合は「10,000 回分」に変換されます。上記のコードは、図 11-8 に示すような効果を実現します。

図 11-8 世界の新しいクラウンワクチンのリアルタイムワクチン接種データモジュール

6 中国における累積ワクチン接種傾向データモジュール

ECharts折れ線グラフに設定項目を設定するサンプルコードは以下のとおりです。

var option = { 
    //X轴
    xAxis: [{
        data: [] 
    }],
    //Y轴
    yAxis: [{    
        axisLabel: {//坐标轴刻度标签的相关设置       
            formatter: function(value) {//Y轴文本样式自定义设置
                if (value >= 100000000) {//如果数值大于1亿
                    value = value / 100000000 + '亿';
                }
                return value;
            }
        }
    }],
    //系列列表
    series: [{            
        type: 'line',// 图形类型            
        data: []
 }]
 };

上記のコードでは、option.xAxis[0].data には X 軸の日付データが格納され、option.series[0].data には毎日の累積接種データが格納され、option.yAxis[0].axisLabel.Formatterメソッドは、Y 軸のテキストスタイルをカスタマイズします。

データのレンダリング、X 軸の日付データと系列データの入力のサンプルコードは次のとおりです。

for(var i=0;i< data.ChinaVaccineTrendData.length;i++)
{
    option.xAxis[0].data.push(data.ChinaVaccineTrendData[i].date);
    option.series[0].data.push(data.ChinaVaccineTrendData[i].total_vaccinations);
}

返された中国の累積ワクチン接種傾向データをトラバースし、各項目の date 属性値を折れ線グラフ構成アイテムの option.xAxis[0].data に格納し、total_vaccinations 属性値を折れ線グラフの option.series[0] に格納します。 chart 構成項目 .data では、実装効果は図 11-9 に示されています。

図 11-9 中国の累積ワクチン接種傾向データモジュール

7 中国における100人当たりのワクチン接種傾向のデータモジュール

中国の100人当たりのワクチン接種傾向データモジュールと中国の累積ワクチン接種傾向データモジュールの違い:

(1) 設定項目option.yAxis[0].data.axisLabel.Formatterは数量が少ないためカスタマイズの必要はありません。

(2) total_vaccinations_per_hundred 属性は中国の 100 人当たりのワクチン接種データを保存し、total_vaccinations 属性は中国の累積ワクチン接種データを保存するため、このモジュールは折れ線グラフ構成アイテムの option.series[0].data に total_vaccinations_per_hundred 属性値を保存します。、残りの構成項目と JavaScript コードは変更する必要はありません。導入効果を図 11-10 に示します。

図 11-10 中国における 100 人当たりのワクチン接種傾向のデータモジュール

8 全国疫病リアルタイム追跡データモジュール

ページ上の指定された位置にデータをレンダリングします。サンプルコードは次のとおりです。

//渲染本土现有确诊数据
document.getElementById('localConfirm').innerHTML =data.chinaTotal.localConfirm;
//渲染现有确诊数据
document.getElementById('nowConfirm').innerHTML =data.chinaTotal.nowConfirm;
//渲染累计确诊数据
document.getElementById('confirm').innerHTML =data.chinaTotal.confirm;
//渲染无症状感染者数据
document.getElementById('nowSevere').innerHTML =data.chinaTotal.noInfect;
//渲染境外输入数据
document.getElementById('import').innerHTML =data.chinaTotal.importedCase;
//渲染累计死亡数据
document.getElementById('dead').innerHTML =data.chinaTotal.dead;

上記のコードは、図 11-11 に示すような効果を実現します。

図 11-11 全国疫病リアルタイム追跡データモジュール

9 全国疫病コラム型モジュール

(1) 全国のリアルタイム流行追跡データ形式を図 11-12 に示します。このうち、data.areaTree[0].childrenは配列となっており、各項目のname属性には都道府県名が保存され、total属性のnowconfirmには既存の診断数が保存されています。

図 11-12 全国の流行状況のリアルタイム追跡データ

(2) EChartsヒストグラムに設定項目を設定します。サンプルコードは以下のとおりです。完全な構成項目コードについては、本書の「折れ線グラフ、円グラフ、ヒストグラム_構成項目.js」ファイルを参照してください。

var option = {            
    yAxis: {
        type: 'category',
            data: []
        },
    series: [
        {
            type: 'bar',// 图形类型
            data: []// 数值
        }
    ]   
};

このうち、ヒストグラム上に描画されたデータはoption.series[0].dataに保存され、各州の名前はyAxis.dataに保存されます。

(3) データのレンダリング、各都道府県のデータを入力します。サンプルコードは次のとおりです。

var provinces = data.areaTree[0].children;//获取所有省份数组
for (var i = 0; i < provinces.length; i++) {
    if(provinces[i].name=='香港'||provinces[i].name=='澳门'||provinces[i].name=='台湾')
        continue;
        option.series[0].data.push(provinces[i].total.nowConfirm);
        option.yAxis.data.push(provinces[i].name);
}

上記のコードは、図 11-13 に示すような効果を実現します。

図 11-13 全国流行ヒストグラムモジュール

国内の既存感染者数のトップ10モジュール10個

(1) 9で得られた各州の感染者数の合計を並べ替え、上位10州のデータを算出する。サンプルコードは次のとおりです。

var provinces = data.areaTree[0].children; //获取所有省份数组
var topData = [];
//所有省份数据放入数组topData中
for(var i=0;i< provinces.length;i++){
    topData.push({
        'name':provinces[i].name,
        'value':provinces[i].total.nowConfirm
    });
}
// 降序排列
topData.sort(function(a,b){
    return b.value-a.value;
});
// 只保留前10条
topData.length = 10;

(2) EChartsで円グラフの構成項目を設定するサンプルコードは以下の通りです。

var option = {
    //系列列表
    series: [
        {
            type: 'pie',// 图形类型
            data:[],//数据
        }
    ]
};

このうち、option.series[0].dataには円グラフを描画するためのデータが格納されています。

(3) データのレンダリング、上位 10 の地方データの入力。サンプルコードは次のとおりです。

for(var i=0;i< topData.length;i++)
{
    option.series[0].data.push(topData[i]);
}

上記のコードの実行結果を図 11-14 に示します。

図 11-14 国内の既存感染者数のトップ 10 モジュール

動画説明: HTML+CSS+JavaScript+Ajax+ECharts で大画面で感染状況のリアルタイム監視を実現_哔哩哔哩_bilibili

ソースコード:清華大学出版局-書籍詳細-「JavaScript フロントエンド開発とサンプルチュートリアル (マイクロクラスビデオ版)」

HTML+CSS+JavaScript+Ajax+ECharts で流行状況のリアルタイム監視と大画面の設計・実装を実現-2