最近、同社のプロジェクトでは、Echartsの棒グラフや棒グラフを使用してさまざまなアイコンを表示する必要がありますが、上司はまだそれが十分に鮮やかではないと考えています。大きな動きをする時が来たようです
結果として、私は暇なときにこのブログを書きました。最初にレンダリングを見てみましょう。
この図のデータは実際のデータではなく、テストコード用に生成されたランダムな値のみであることに注意してください
表示ウェブサイト：表示URL
まず、この記事のコードは以下に基づいています：https : //github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js
プロジェクトは2回変更されます。元のプロジェクトを編集してEXCEL CSVファイルで生成し、[アップロード]をクリックして効果を表示する必要があります。EXCELでデータを読み取って、AJAXリクエストAPIを使用できない理由を示すことができるため、動的に生成されたデータ表示データを取得するにはna
改装が始まりました：
1.まずアップロードボックスを削除します
元のプロジェクトでは、SVG要素の高さと幅は固定されていますが、実際のプロジェクトでは、コンピューターの解像度が異なるため、ここでは
JQを使用して、ページが表示できる高さと幅を読み取り、SVG要素に割り当てます
2.設定が完了したら、visual.jsの入力コードを削除し、アップロード後にEXCELコードを読み取ります
3.最後のステップ、フロントデスクはAJAXを介してインターフェイスにアクセスし、データを読み取ってレンダリングします。
data.jsonのデータは次のとおりです。
{
"code":0,
"msg":null,
"count":0,
"data":[
{
"type":"湖北",
"name":"武汉市",
"value":"315",
"date":"1月26日"
},
{
"type":"湖北",
"name":"黄石市",
"value":"33",
"date":"1月26日"
},
{
"type":"湖北",
"name":"十堰市",
"value":"23",
"date":"1月26日"
},
{
"type":"湖北",
"name":"襄阳市",
"value":"61",
"date":"1月26日"
},
{
"type":"湖北",
"name":"宜昌市",
"value":"12",
"date":"1月26日"
},
{
"type":"湖北",
"name":"荆州市",
"value":"30",
"date":"1月26日"
},
{
"type":"湖北",
"name":"荆门市",
"value":"28",
"date":"1月26日"
},
{
"type":"湖北",
"name":"鄂州市",
"value":"27",
"date":"1月26日"
},
{
"type":"湖北",
"name":"孝感市",
"value":"101",
"date":"1月26日"
},
{
"type":"湖北",
"name":"黄冈市",
"value":"111",
"date":"1月26日"
},
{
"type":"湖北",
"name":"咸宁市",
"value":"21",
"date":"1月26日"
},
{
"type":"湖北",
"name":"随州市",
"value":"46",
"date":"1月26日"
},
{
"type":"湖北",
"name":"恩施州",
"value":"13",
"date":"1月26日"
},
{
"type":"湖北",
"name":"仙桃市",
"value":"5",
"date":"1月26日"
},
{
"type":"湖北",
"name":"天门市",
"value":"11",
"date":"1月26日"
},
{
"type":"湖北",
"name":"武汉市",
"value":"273",
"date":"1月27日"
},
{
"type":"湖北",
"name":"黄石市",
"value":"48",
"date":"1月27日"
},
{
"type":"湖北",
"name":"十堰市",
"value":"86",
"date":"1月27日"
},
{
"type":"湖北",
"name":"襄阳市",
"value":"24",
"date":"1月27日"
},
{
"type":"湖北",
"name":"宜昌市",
"value":"242",
"date":"1月27日"
},
{
"type":"湖北",
"name":"荆州市",
"value":"415",
"date":"1月27日"
},
{
"type":"湖北",
"name":"荆门市",
"value":"205",
"date":"1月27日"
},
{
"type":"湖北",
"name":"鄂州市",
"value":"99",
"date":"1月27日"
},
{
"type":"湖北",
"name":"孝感市",
"value":"88",
"date":"1月27日"
},
{
"type":"湖北",
"name":"黄冈市",
"value":"342",
"date":"1月27日"
},
{
"type":"湖北",
"name":"咸宁市",
"value":"408",
"date":"1月27日"
},
{
"type":"湖北",
"name":"随州市",
"value":"286",
"date":"1月27日"
},
{
"type":"湖北",
"name":"恩施州",
"value":"110",
"date":"1月27日"
},
{
"type":"湖北",
"name":"仙桃市",
"value":"14",
"date":"1月27日"
},
{
"type":"湖北",
"name":"天门市",
"value":"385",
"date":"1月27日"
},
{
"type":"湖北",
"name":"武汉市",
"value":"9",
"date":"1月28日"
},
{
"type":"湖北",
"name":"黄石市",
"value":"183",
"date":"1月28日"
},
{
"type":"湖北",
"name":"十堰市",
"value":"459",
"date":"1月28日"
},
{
"type":"湖北",
"name":"襄阳市",
"value":"500",
"date":"1月28日"
},
{
"type":"湖北",
"name":"宜昌市",
"value":"8",
"date":"1月28日"
},
{
"type":"湖北",
"name":"荆州市",
"value":"136",
"date":"1月28日"
},
{
"type":"湖北",
"name":"荆门市",
"value":"331",
"date":"1月28日"
},
{
"type":"湖北",
"name":"鄂州市",
"value":"430",
"date":"1月28日"
},
{
"type":"湖北",
"name":"孝感市",
"value":"491",
"date":"1月28日"
},
{
"type":"湖北",
"name":"黄冈市",
"value":"264",
"date":"1月28日"
},
{
"type":"湖北",
"name":"咸宁市",
"value":"34",
"date":"1月28日"
},
{
"type":"湖北",
"name":"随州市",
"value":"495",
"date":"1月28日"
},
{
"type":"湖北",
"name":"恩施州",
"value":"117",
"date":"1月28日"
},
{
"type":"湖北",
"name":"仙桃市",
"value":"166",
"date":"1月28日"
},
{
"type":"湖北",
"name":"天门市",
"value":"362",
"date":"1月28日"
},
{
"type":"湖北",
"name":"武汉市",
"value":"198",
"date":"1月29日"
},
{
"type":"湖北",
"name":"黄石市",
"value":"343",
"date":"1月29日"
},
{
"type":"湖北",
"name":"十堰市",
"value":"280",
"date":"1月29日"
},
{
"type":"湖北",
"name":"襄阳市",
"value":"495",
"date":"1月29日"
},
{
"type":"湖北",
"name":"宜昌市",
"value":"401",
"date":"1月29日"
},
{
"type":"湖北",
"name":"荆州市",
"value":"490",
"date":"1月29日"
},
{
"type":"湖北",
"name":"荆门市",
"value":"249",
"date":"1月29日"
},
{
"type":"湖北",
"name":"鄂州市",
"value":"460",
"date":"1月29日"
},
{
"type":"湖北",
"name":"孝感市",
"value":"196",
"date":"1月29日"
},
{
"type":"湖北",
"name":"黄冈市",
"value":"64",
"date":"1月29日"
},
{
"type":"湖北",
"name":"咸宁市",
"value":"253",
"date":"1月29日"
},
{
"type":"湖北",
"name":"随州市",
"value":"139",
"date":"1月29日"
},
{
"type":"湖北",
"name":"恩施州",
"value":"173",
"date":"1月29日"
},
{
"type":"湖北",
"name":"仙桃市",
"value":"446",
"date":"1月29日"
},
{
"type":"湖北",
"name":"天门市",
"value":"159",
"date":"1月29日"
},
{
"type":"湖北",
"name":"武汉市",
"value":"268",
"date":"1月30日"
},
{
"type":"湖北",
"name":"黄石市",
"value":"246",
"date":"1月30日"
},
{
"type":"湖北",
"name":"十堰市",
"value":"420",
"date":"1月30日"
},
{
"type":"湖北",
"name":"襄阳市",
"value":"36",
"date":"1月30日"
},
{
"type":"湖北",
"name":"宜昌市",
"value":"171",
"date":"1月30日"
},
{
"type":"湖北",
"name":"荆州市",
"value":"299",
"date":"1月30日"
},
{
"type":"湖北",
"name":"荆门市",
"value":"125",
"date":"1月30日"
},
{
"type":"湖北",
"name":"鄂州市",
"value":"389",
"date":"1月30日"
},
{
"type":"湖北",
"name":"孝感市",
"value":"241",
"date":"1月30日"
},
{
"type":"湖北",
"name":"黄冈市",
"value":"48",
"date":"1月30日"
},
{
"type":"湖北",
"name":"咸宁市",
"value":"64",
"date":"1月30日"
},
{
"type":"湖北",
"name":"随州市",
"value":"476",
"date":"1月30日"
},
{
"type":"湖北",
"name":"恩施州",
"value":"101",
"date":"1月30日"
},
{
"type":"湖北",
"name":"仙桃市",
"value":"347",
"date":"1月30日"
},
{
"type":"湖北",
"name":"天门市",
"value":"167",
"date":"1月30日"
},
{
"type":"湖北",
"name":"武汉市",
"value":"375",
"date":"1月31日"
},
{
"type":"湖北",
"name":"黄石市",
"value":"342",
"date":"1月31日"
},
{
"type":"湖北",
"name":"十堰市",
"value":"422",
"date":"1月31日"
},
{
"type":"湖北",
"name":"襄阳市",
"value":"135",
"date":"1月31日"
},
{
"type":"湖北",
"name":"宜昌市",
"value":"215",
"date":"1月31日"
},
{
"type":"湖北",
"name":"荆州市",
"value":"227",
"date":"1月31日"
},
{
"type":"湖北",
"name":"荆门市",
"value":"266",
"date":"1月31日"
},
{
"type":"湖北",
"name":"鄂州市",
"value":"461",
"date":"1月31日"
},
{
"type":"湖北",
"name":"孝感市",
"value":"281",
"date":"1月31日"
},
{
"type":"湖北",
"name":"黄冈市",
"value":"218",
"date":"1月31日"
},
{
"type":"湖北",
"name":"咸宁市",
"value":"47",
"date":"1月31日"
},
{
"type":"湖北",
"name":"随州市",
"value":"324",
"date":"1月31日"
},
{
"type":"湖北",
"name":"恩施州",
"value":"72",
"date":"1月31日"
},
{
"type":"湖北",
"name":"仙桃市",
"value":"314",
"date":"1月31日"
},
{
"type":"湖北",
"name":"天门市",
"value":"293",
"date":"1月31日"
},
{
"type":"湖北",
"name":"武汉市",
"value":"143",
"date":"2月1日"
},
{
"type":"湖北",
"name":"黄石市",
"value":"265",
"date":"2月1日"
},
{
"type":"湖北",
"name":"十堰市",
"value":"48",
"date":"2月1日"
},
{
"type":"湖北",
"name":"襄阳市",
"value":"212",
"date":"2月1日"
},
{
"type":"湖北",
"name":"宜昌市",
"value":"165",
"date":"2月1日"
},
{
"type":"湖北",
"name":"荆州市",
"value":"68",
"date":"2月1日"
},
{
"type":"湖北",
"name":"荆门市",
"value":"370",
"date":"2月1日"
},
{
"type":"湖北",
"name":"鄂州市",
"value":"308",
"date":"2月1日"
},
{
"type":"湖北",
"name":"孝感市",
"value":"253",
"date":"2月1日"
},
{
"type":"湖北",
"name":"黄冈市",
"value":"106",
"date":"2月1日"
},
{
"type":"湖北",
"name":"咸宁市",
"value":"83",
"date":"2月1日"
},
{
"type":"湖北",
"name":"随州市",
"value":"348",
"date":"2月1日"
},
{
"type":"湖北",
"name":"恩施州",
"value":"381",
"date":"2月1日"
},
{
"type":"湖北",
"name":"仙桃市",
"value":"279",
"date":"2月1日"
},
{
"type":"湖北",
"name":"天门市",
"value":"195",
"date":"2月1日"
}
]
}最後に、データにアクセスして動的な棒グラフを取得します
最後のソースアドレス：https : //github.com/jock-x/AjaxBarGraph.git
