vaadin charts 使用

简介: vaadin

hisLimitChart = new Chart();

    hisLimitChart.addStyleName("limit-hisLimitChart");

chartLayout.addComponent(hisLimitChart);
//加载内容的方法;
private void initChartContent() {

    
    Configuration conf = hisLimitChart.getConfiguration();
    
    // 加载图表需要的数据
    DataSeries series = new DataSeries();
    List<Limit> limits = limitManageProcess.getListByName(comLimit_name.getValue().toString());
    // set limit info
    limitInfo.setValue(limits.get(0).getTxtDescription());
    
    for (Limit limit : limits) {
        double value = limit.getAmtLimit();
        DataSeriesItem item = new DataSeriesItem();
        item.setX(limit.getDtStart());
        item.setY(value);
        series.add(item);
    }
    series.setName("限额金额");
    conf.addSeries(series);

    // 将数据render到图表中;X轴设置未关键期限中最早日期到最晚日期的区间;obj
    conf.getChart().setType(ChartType.LINE);
    conf.getSubTitle().setAlign(HorizontalAlign.CENTER);
    conf.setTitle("");
    
    XAxis xAxis = conf.getxAxis();

// xAxis.getLabels().setFormat("{value:%Y-%m-%d}");

    xAxis.getLabels().setFormat("{value:%Y}");
    xAxis.setTitle("");
    
    YAxis yAxis = conf.getyAxis();
    yAxis.setMin(0);
    yAxis.getLabels().setFormat("{value}");
    yAxis.setTitle(new AxisTitle("限额金额("+limits.get(0).getCdLimitUnit()+")"));
    yAxis.getTitle().setAlign(VerticalAlign.MIDDLE);
    
    conf.getxAxis().setType(AxisType.DATETIME);
    conf.getTooltip().setXDateFormat("%Y-%m-%d");
    conf.getLegend().setEnabled(false);
    
    PlotOptionsLine plotOptions = new PlotOptionsLine();
    plotOptions.getDataLabels().setEnabled(false);
    conf.setPlotOptions(plotOptions);
    hisLimitChart.drawChart(conf);
    
}
相关文章
|
1月前
|
JSON JavaScript 前端开发
Google Charts
Google Charts
|
12天前
|
开发框架 JavaScript 前端开发
MudBlazor:基于Material Design风格开源且强大的Blazor组件库
MudBlazor:基于Material Design风格开源且强大的Blazor组件库
|
11月前
|
前端开发 JavaScript 关系型数据库
展示 Postlight 的 WordPress + React Starter Kit
展示 Postlight 的 WordPress + React Starter Kit
71 1
|
资源调度 JavaScript 前端开发
Ant Design Vue 使用-引入 ant-design-vue并且使用
Ant Design Vue 使用-引入 ant-design-vue并且使用
655 1
|
11月前
|
开发框架 Java UED
vaadin
vaadin
80 0
|
设计模式 移动开发 前端开发
前端组件之Bootstrap与Ant design of Vue
前端组件之Bootstrap与Ant design of Vue
423 0
|
XML JavaScript 前端开发
SpringBoot + Ant Design Vue实现数据导出功能
需求:1,以xlsx格式导出所选表格中的内容,2, 要求进行分级, 3,设置表头颜色。
262 0
|
JavaScript
【Vue 开发实战】生态篇 # 23:组件库对比:Element UI、Ant Design Vue、iView
【Vue 开发实战】生态篇 # 23:组件库对比:Element UI、Ant Design Vue、iView
273 0
【Vue 开发实战】生态篇 # 23:组件库对比:Element UI、Ant Design Vue、iView
|
资源调度 JavaScript
vue-cli 3 中添加Ant Design组件
vue-cli 3 中添加Ant Design组件
vue-cli 3 中添加Ant Design组件
|
iOS开发 数据格式
iOS - Quartz 2D 第三方框架 Charts 绘制图表
1、Charts 简介 使用第三方框架 Charts 绘制 iOS 图表。GitHub 源码 Charts Charts 是一款用于绘制图表的框架,可以绘制柱状图、折线图、K线图、饼状图等。Charts 只有 Swift 版本。
2731 0