iChart JS自定义报表+多报表集成+去除一条线上的部分点

ichart_js___ ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案 。如果你正在开发HTML5的应用,ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。 立即下载
//Deploy data
function showArea2D(element,title,subtitle,foottext,labels,data,myListener){

    if(labels.length != 0) {
        var chart = new iChart.LineBasic2D({
            render : element,
            data: [
                {
                    name : 'Product',
                    value:data,
                    color:'#1f7e92',
                    line_width:0
                }
            ],
            title : 'Deploy Data',
            width : screen.width*25/84,
            height : screen.height*34/63,

            coordinate:{
                height:'90%',
                scale:[
                    {
                        position:'left',
                        scale_enable : false,

                        start_scale:0,
                        scale_space:1,
                        end_scale:4,
                        text_space:5000
                    },
                    {
                        position:'bottom',
                        label : {color:'#9d987a',font : 'Times New Roman',fontsize:11,fontweight:600},
                        scale_enable : true,
                        labels:labels
                    }
                ],
                background_color:'#f6f9fa'
            },

            sub_option:{
                hollow_inside:false,
                point_size:16,
                label:false,
	       //Remove some points from the line
                listeners:{
                    beforedraw:function(target){

                        return true;
                    },

                    initialize:function(target){
                        for(var i = 0; i < data.length; i++) {

                            if(data[i] == 2) {
                                target.intersections[i][0].x=-500;
                            }
                        }


                        console.log(target.intersections);
                    }
                }
            }
        });

        //Custom plugin, show success and failure.
        chart.plugin(new iChart.Custom({
            drawFn:function(){
                //Position
                var coo = chart.getCoordinate(),
                    x = coo.get('originx'),
                    y = coo.get('originy'),
                    w = coo.width,
                    h = coo.height;
                //Render the text
                chart.target.textAlign('start')
                    .textBaseline('bottom')
                    .textFont('600 11px Times New Roman')
                    .fillText('Success',x-40,y+h/4+5,false,'#3e576f')
                    .textBaseline('top')
                    .fillText('Failure',x-40,y+3*h/4-5,false,'#3e576f');
            }
        }));

        //Success line
        chart.plugin(new iChart.Custom({
            drawFn:function(){
                var avg = chart.total/5,
                    coo = chart.getCoordinate(),
                    x = coo.get('originx'),
                    W = coo.width,
                    S = coo.getScale('left'),
                    H = coo.height,
                    h = (avg - S.start) * H / S.distance,
                    y = chart.y + H/4 ;
                chart.target.line(x,y,x+W,y,2,'#009a58')
                    .textAlign('start')
                    .textBaseline('middle')
                    .textFont('600 12px Verdana')
                    .fillText('',x+W+5,y,false,'#b32c0d');
            }
        }));

        //Failure line
        chart.plugin(new iChart.Custom({
            drawFn:function(){
                var avg = chart.total/5,
                    coo = chart.getCoordinate(),
                    x = coo.get('originx'),
                    W = coo.width,
                    S = coo.getScale('left'),
                    H = coo.height,
                    h = (avg - S.start) * H / S.distance,
                    y = chart.y + 3*H/4 ;
                chart.target.line(x,y,x+W,y,2,'#b32c0d')
                    .textAlign('start')
                    .textBaseline('middle')
                    .textFont('600 12px Verdana')
                    .fillText('',x+W+5,y,false,'#b32c0d');
            }
        }));

        //No data
        chart.plugin(new iChart.Custom({
            drawFn:function(){
                var avg = chart.total/5,
                    coo = chart.getCoordinate(),
                    x = coo.get('originx'),
                    W = coo.width,
                    S = coo.getScale('left'),
                    H = coo.height,
                    h = (avg - S.start) * H / S.distance,
                    y = chart.y + H/2;
                chart.target.line(x,y,x+W,y,2,'#00a9d9')
                    .textAlign('start')
                    .textBaseline('middle')
                    .textFont('600 12px Verdana')
                    .fillText('',x+W+5,y,false,'#b32c0d');
            }
        }));


        chart.draw();
    }

ichart ajax实现动态改变数据 ichart ajax实现动态改变数据报表 立即下载

相关推荐

ichart用法详解

ichart用法详解ichart用法详解ichart用法详解ichart用法详解ichart用法详解

ichart.js绘制虚线 ,平均分虚线

var Data=new Array(); Data[0] = { labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"], datasets : [ { name : '优秀率', color:'#1dbcfe', line_width:4, value : [80,75,92...

weixin_30471065的博客 285

NSGA-Ⅱ算法:从原理到实战,解锁多目标优化难题

本文深入解析NSGA-Ⅱ算法在多目标优化中的应用,从原理到实战全面覆盖。通过快速非支配排序、精英策略和拥挤度比较三大创新,NSGA-Ⅱ有效解决了传统算法的效率与多样性问题。结合工业案例展示其在注塑工艺优化中的显著效果,为工程师提供实用解决方案。

weixin_29207149的博客 367

html5按钮组水平均分,ichart.js绘制虚线、平均分虚线效果的实现代码_javascript技巧...

ichart.js绘制虚线、平均分虚线效果的实现代码var Data=new Array(); Data[0] = { labels : ["第一单元","第二单元","第三单元","第四单元","第五单元"], datasets : [ { name : '优秀率', color:'#1dbcfe', ...

weixin_42395669的博客 280

AD9026芯片开发实战指南:从硬件配置到射频校准

本文为AD9026芯片开发实战指南,详细解析了从硬件设计、电源时钟配置、SPI初始化到多芯片同步与JESD204高速链路建立的完整流程。重点探讨了射频校准技术,包括初始化校准与跟踪校准,以保障5G、MIMO等现代通信系统所需的射频性能。旨在帮助开发者系统掌握这颗高性能射频收发器的应用,规避常见设计陷阱。

tomato的博客 851

NDVI空间分布变化Slope趋势分析与F检验(自用)

1.NDVI数据预处理2.一元线性回归分析3.Slope趋势分析与F检验

什么都学亿点点的博客 9017

iChart JS画自定义图表

//Deploy data function showArea2D(element,title,subtitle,foottext,labels,data){ var data = [ { name : 'Deploy', value:[1,3,1,3,3,3,1,1,3,1,3,1], color:'

ithouse的专栏 4329

经典蓝牙中的Sniff、Hold与Park模式

若主设备在Sniff Attempt窗口外发送数据,从设备无法接收,需依赖重传机制。移动时立即传输数据。:Sniff Interval=20ms,Attempt=1时隙。:传感器每2秒唤醒一次同步信标,主设备按需唤醒特定传感器采集数据。Slave进入Sniff模式:每20ms唤醒1个时隙监听数据。:设备需要短暂执行高优先级任务(如扫描其他蓝牙设备)。:无数据传输超时后,设备可能自动进入Sniff模式。:主设备通过信标唤醒从设备,或从设备主动请求退出(:平衡功耗与响应速度,适合间歇性数据传输设备。

shishuangquan111的博客 1673

【Mysql+Charts】draw ichartjs(四)

需要将数据在网页端绘制成曲线图标的形式,在网上找到了ichartjs开源图形组件ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形下面的内容主要学习参考于ichartjs官网的相关文档和源码: http://www.ichartjs.com/构建项目环境 由于ichartjs是一个js库,所以只要将ichart.js加入

sysu_lluozh 1761

从零开始学嵌入式之STM32——1.什么是STM32

它是ST公司推出的一系列单片机的统称。ST----指的是ST公司----意法半导体。意法半导体,成立于1987年,是由意大利的SGS微电子公司和法国的Thomson半导体公司合并而成。ARM目前主要是ARM架构处理器及外围组件的电路设计方案,知识产权授权的形式收取费用,其他公司根据ARM的方案设计出CPU产品。,它以应用为核心,软硬件可裁剪,旨在实现对设备的控制、监测或辅助功能,区别于通用计算机(如 PC、服务器)的 “一机多用” 属性。在嵌入式领域,目前主流的是cortex-M3内核推出的芯片。

qshdyy的博客 1854

【49】Camunda8-Self-Managed部署之Docker方式

围绕camunda8 self-managed,介绍了基于Docker部署相关服务的过程。

AlieNeny的博客 1682

对ichartjs基于基于HTML5的开源图形组件画图的心得

简介:ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。如果你正在开发HTML5的应用,ichartjs正好适合您。chartjs是基于Apache License 2.0协议的开源项目。 心得:用ichartjs画图就是参照ichartjs官网(http://www.ichartjs.com/samples/in

疯狂的葡萄 3136

uniapp - 详细手机端h5网页调用手机摄像头进行二维码识别扫描,在uniapp的H5移动端微信网页平台中,在浏览器中调用手机扫码功能详细教程,识别二维码并获取扫描结果(完整示例源码,一键复制即用

uniapp,h5,手机端网页,H5手机网页,uniapp开发h5实现扫码功能,uniapp微信h5网页扫码sdk使用教程,uniapp h5网页如何实现浏览器扫码,uniapp扫码功能怎么兼容h5_uniapph5怎么做扫码功能,uniapp的手机网页如何实现扫二维码一维码,浏览器H5实现js扫码,H5调用摄像头和扫一扫功能,亲测可用,H5调用本地摄像头实现扫一扫,uni-h5项目解决扫码功能,uniapp实现微信H5扫码,解决uniapp在H5端使用不能扫码问题,uni-app的h5扫码(二维码、条形码

✅ 精选推荐文章 1万+

【ichart】简单的统计图表ichart.js的使用

1、首先下载,点击下载 2、只需要这一个js,粘贴赋值到自己项目中即可。 3、引入js <script type="text/javascript" src="../js/ichart.1...

weixin_39037804的博客 2191

Nature、science、cell旗下刊物

Nature\science\cell子刊说明

计算机视觉 5606

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

在一个页面显示多个iChart报表

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" isELIgnored="false"%> Project Report --%>

ithouse的专栏 1737

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

ichart

<!DOCTYPE HTML> <html lang="zh"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximu...

weixin_30416871的博客 1551

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

js图表报表html5图表,介绍一个!非常简单非常方便!制作图表报表的js库 —— ichartjs 【详细操作】...

ichartjs是一个国产的图表库,提供各种api,以及多种样式的图表图表包括:面积图、2d条形图、2d柱状图、3d柱状图、折线图、饼状图等,并且可以组合图形。ichart是一个轻量级的js组件,快速构建图表并可跨平台使用这是ichart的案例展示图,在这个页面我们通过点击view code 查看当前图表调用api的方法ichart官网api的说明使用的参考文档一个简单的例子熟悉一下ichart....

weixin_39738152的博客 678

iChart--地图显示人口统计

导语 大数据呈现应用越来越广泛,支持大数据呈现的SDK,水平较高的有echarts、highchart、D3;然而在地图呈现的功能上,大都只能绘制矢量地图,而不能呈现具有真实效果的地图;鉴于此,本文重点在于如何制作一张,即可以看到真实效果,又能进行交互的矢量地图; 先睹为快 若有所思 技术选择 想实现上述效果,最先想到的SDK是T...

weixin_33984032的博客 920

js报表

http://www.chartjs.org/  使用html5 http://www.ichartjs.com/   国产的非常好 http://www.highcharts.com/      Highcharts         

hqmln的博客 172

介绍一个!非常简单非常方便!制作图表报表的js库 —— ichartjs 【详细操作】...

ichartjs是一个国产的图表库,提供各种api,以及多种样式的图表 图表包括:面积图、2d条形图、2d柱状图、3d柱状图、折线图、饼状图等,并且可以组合图形。 ichart是一个轻量级的js组件,快速构建图表并可跨平台使用 这是ichart的案例展示图,在这个页面我们通过点击view code 查看当前图表调用api的方法 ichart官网api的说明使用的参考文档 ...

268

Android通过iChartJs实现动态图表、报表的显示Demo

效果展示如下: 再看布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" andr

道哥的技术博客 5011

自动化自定义模板

http://www.ichartjs.com/samples/index.html?page=bar2d_01.html&pageno=1 <!DOCTYPE html> <html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="cont...

weixin_34356310的博客 142

android ichart ColumnStacked2D图表无法显示解决方案

html                             Hello World                                                var width = window.chart.getWidth();        var height = window.chart.getHeight();          

愤怒的frank 924
上一篇: iChart JS画自定义图表
下一篇: Java得到当前项目路径
ithouse
博客等级 码龄12年 200粉丝 212原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值