Recientemente, los proyectos de la compañía necesitan mostrar varios íconos, utilizando los gráficos de barras y gráficos de barras de Echarts, pero el jefe todavía piensa que no es lo suficientemente vívido. Parece que es hora de hacer un gran movimiento
Como resultado, escribí este blog en mi tiempo libre, primero mire las representaciones :
Tenga en cuenta que los datos en esta figura no son datos reales, solo los valores aleatorios generados para el código de prueba
Sitio web de visualización : URL visible
En primer lugar, el código de este artículo se basa en: https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js
El proyecto se modifica dos veces. El proyecto original debe editarse y generarse en el archivo CSV de EXCEL y hacer clic en cargar para mostrar el efecto. Estaba pensando que ya que puedo leer los datos en EXCEL para mostrar por qué no puedo usar la API de solicitud AJAX Para obtener la visualización de datos generada dinámicamente, na
La renovación comenzó:
1. Primero quite el cuadro de carga
En el proyecto original, el elemento SVG está configurado para tener una altura y un ancho fijos, pero en el proyecto real, debido al problema de las diferentes resoluciones de la computadora, así que aquí,
Uso JQ para leer el alto y el ancho que la página puede ver y asignarlo al elemento SVG
2. Una vez completada la configuración, eliminamos el código de entrada en visual.js y leemos el código EXCEL después de cargar
3. El último paso, la recepción accede a la interfaz a través de AJAX, lee los datos y renderiza
Los datos en data.json son los siguientes:
{
"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日"
}
]
}Finalmente, acceda a los datos para obtener un gráfico de barras dinámico
Última dirección de origen: https://github.com/jock-x/AjaxBarGraph.git
