zoukankan      html  css  js  c++  java
  • JFreeChart当鼠标停留在热点提示自定义信息功能

    当鼠标停留在数据点时,希望有提示信息显示,但是根据业务需要,我们需要自定义显示一下信息!具体功能实现如下:

    首先我们要弄明白,Jfreechart鼠标提示信息显示主要是得到一个数据的map对象,该map中定义了热点的坐标及提示时显示的信息即title

    html或jsp中代码:

    <img src="Jfreechart生成的图片路径" width=800 height=400 border=0 usemap="mapKey" >"

    mapKey 默认为JfreeChart生成的图片名:mapKey = ServletUtilities.saveChartAsPNG(chart, 800, 400, info,session);// 生成图片

    知道该原理,只有得到map,然后把里面的提示信息修改为我们的自定义提示信息即可;

    如何生成图表(略过) 网上一搜一大把

    1、首先获取map数据:

                JFreeChart chart = ChartFactory.createTimeSeriesChart(
                        "正常用量分析", // title
                        x_name, // x-axis label
                        "消耗热能 [单位:MJ]", // y-axis label
                        collection, // data
                        false, // create legend?
                        true, // generate tooltips?
                        false // generate URLs?
                        );

    当你创建JFeeChart对象倒数第二个参数为true时,表示生成工具提示。

    当把数据插入到数据集后,通过

    String map_ = ChartUtilities.getImageMap(fileName,info);
    

    获取到map提示信息的字符串表现形式,打印出来:

    <map id="jfreechart-33716.png" name="jfreechart-33716.png">
    <area shape="poly" coords="771,60,777,60,777,66,771,66,771,60,771,60" title="正常用量分析: (10-10-1 上午12:00, 10,000)" alt="" nohref="nohref"/>
    <area shape="poly" coords="699,90,705,90,705,96,699,96,699,90,699,90" title="正常用量分析: (10-9-1 上午12:00, 9,000)" alt="" nohref="nohref"/>
    <area shape="poly" coords="626,119,632,119,632,125,626,125,626,119,626,119" title="正常用量分析: (10-8-1 上午12:00, 8,000)" alt="" nohref="nohref"/>
    <area shape="poly" coords="552,149,558,149,558,155,552,155,552,149,552,149" title="正常用量分析: (10-7-1 上午12:00, 7,000)" alt="" nohref="nohref"/>
    <area shape="poly" coords="481,179,487,179,487,185,481,185,481,179,481,179" title="正常用量分析: (10-6-1 上午12:00, 6,000)" alt="" nohref="nohref"/>
    <area shape="poly" coords="407,208,413,208,413,214,407,214,407,208,407,208" title="正常用量分析: (10-5-1 上午12:00, 5,000)" alt="" nohref="nohref"/>
    <area shape="poly" coords="336,238,342,238,342,244,336,244,336,238,336,238" title="正常用量分析: (10-4-1 上午12:00, 4,000)" alt="" nohref="nohref"/>
    <area shape="poly" coords="263,268,269,268,269,274,263,274,263,268,263,268" title="正常用量分析: (10-3-1 上午12:00, 3,000)" alt="" nohref="nohref"/>
    <area shape="poly" coords="196,297,202,297,202,303,196,303,196,297,196,297" title="正常用量分析: (10-2-1 上午12:00, 2,000)" alt="" nohref="nohref"/>
    <area shape="poly" coords="122,327,128,327,128,333,122,333,122,327,122,327" title="正常用量分析: (10-1-1 上午12:00, 1,000)" alt="" nohref="nohref"/>

    </map>

    提示信息是在title项,只要我们把title项改为我们需要的信息即可。

    最后完成的效果:

  • 相关阅读:
    vue 优化hash持久化缓存
    用vue的抽象组件来做一个防止img标签url为空或url地址出错的验证
    读源码学会一些编程小技巧
    webpack编译后的代码如何在浏览器执行
    vue@cli3 public目录下的静态图片,如何使用在css类文件中(sass可行,纯css不行)
    vue@cli3 项目模板怎么使用public目录下的静态文件,找了好久都不对,郁闷!
    vscode如何配置ts的lint,如何配置才能让eslint和prettier不冲突一键格式化代码(vue开发使用)
    rollup 使用babel7版本的插件rollup-plugin-babel,rollup-plugin-babel使用报错解决办法。
    深入研究webpack之Tree Shaking相关属性sideEffects用处
    前端性能优化之http缓存
  • 原文地址:https://www.cnblogs.com/quyongjin/p/3148597.html
Copyright © 2011-2022 走看看