Слияние кода завершено, страница обновится автоматически
Пример
<e:ImportECharts scriptPath="js/echarts.min.js" autoRestore="true"/>
scriptPath — путь к файлу echarts.js
autoRestore — логическое значение, по умолчанию false. При значении true, диаграмма будет автоматически восстанавливаться при входе в видимую область (с анимацией).
Функция autoRestore является экспериментальной, используйте её осторожно.
Обычные диаграммы NormalChart и динамические DynamicChart должны использоваться вместе с ImportECharts для достижения эффекта.
Пример
<%
LineChart lineChart = new LineChart();
lineChart.setData(new double[]{1, 2, 3, 4});
lineChart.setName("Линейная диаграмма");
%>
<e:NormalChart chart="<%=lineChart%>" id="lineChart" style="height:480px" delayLoad="false"/>
chart — пользовательская определённая диаграмма
id — уникальный идентификатор диаграммы
style — стиль
delayLoad — логическое значение, по умолчанию true. При значении true, диаграмма будет инициализирована только после того как она войдёт в видимую область (отложенная загрузка).
Пример
<e:DynamicChart id="dynamic" url="/getData" interval="1000" style="height:480px"/>
id — уникальный идентификатор диаграммы
style — стиль
url — адрес запроса для получения данных в формате JSON (необходимо убедиться, что кодировка страницы совпадает с кодировкой ответа, чтобы избежать смешивания символов)
interval — интервал времени между запросами, измеряется в миллисекундах
1 Копируйте все файлы из директории out/artifacts/EChartsTaglib_war_exploded в пустую директорию
2 Удалите dynamic.jsp, index.jsp и WEB-INF/web.xml
3 Вставьте следующий код в ваш web.xml в директории WEB-INF:
<jsp-config>
<taglib>
<taglib-uri>/WEB-INF/EChartTaglib.tld</taglib-uri>
<taglib-location>/WEB-INF/EChartTaglib.tld</taglib-location>
</taglib>
</jsp-config>
<servlet>
<description>Динамические данные</description>
<display-name>DynamicData</display-name>
<servlet-name>getData</servlet-name>
<servlet-class>servlet.DynamicData</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>getData</servlet-name>
<url-pattern>/getData</url-pattern>
</servlet-mapping>
4 Вставьте ранее скопированные файлы в корневую директорию вашего проекта
5 Создайте index.jsp
<%@ page import="cn.edu.gdut.zaoying.Charts.LineChart" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="/WEB-INF/EChartTaglib.tld" prefix="e"%>
<html>
<head>
<title>EChartTaglib</title>
<e:ImportECharts scriptPath="js/echarts.min.js"/>
</head>
<body>
<%
LineChart lineChart = new LineChart();
lineChart.setData(new double[]{1, 2, 3, 4});
lineChart.setName("Линейная диаграмма");
%>
<e:NormalChart chart="<%=lineChart%>" id="lineChart" style="height:480px" delayLoad="false"/>
<%
LineChart lineChart1 = new LineChart();
lineChart1.setData(new double[]{2, 4, 8, 6});
lineChart1.setName("Линейная диаграмма");
%>
<e:NormalChart chart="<%=lineChart1%>" id="lineChart1" style="height:480px"/>
<%
LineChart lineChart2 = new LineChart();
lineChart2.setData(new double[]{1, 2, 4, 8});
lineChart2.setName("Линейная диаграмма");
%>
<e:NormalChart chart="<%=lineChart2%>" id="lineChart2" style="height:480px"/>
</body>
</html>
6 Создайте файл servlet DynamicData.java
import cn.edu.gdut.zaoying.Charts.LineChart;
import cn.edu.gdut.zaoying.EChartsAnnotationProcessor;
import com.alibaba.fastjson.JSON;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Created by huang on 2016/3/14 0014.
*/
public class DynamicData extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
LineChart lineChart = new LineChart();
lineChart.setData(new double[]{3, 6, 8, 9});
lineChart.setName("Динамически обновляемая диаграмма");
String json = JSON.toJSONString(EChartsAnnotationProcessor.parseChart(lineChart));
resp.getOutputStream().write(json.getBytes("UTF-8")); // Предотвращение смешивания символов
}
}
7 Создайте dynamic.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="/WEB-INF/EChartTaglib.tld" prefix="e"%>
<html>
<head>
<title>Динамически обновляемая диаграмма</title>
<e:ImportECharts scriptPath="js/echarts.min.js"/>
</head>
<body>
<e:DynamicChart id="dynamic" url="/getData" interval="1000" style="height:480px"/>
</body>
</html>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )