h5 생산 실적 변화 꺾은선형 차트-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

h5 생산 실적 변화 꺾은선형 차트

php中世界最好的语言

Mar 12, 2018 am 09:57 AM

html5변화

이번에는 h5의 성능변화 꺾은선형 차트를 가져오겠습니다. h5 성능변화 꺾은선형 차트 제작 시 주의사항은 무엇인가요?

내부 요소 높이를 동적으로 설정 =>

    <!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>示例1</title>
    <style>
        #title {            margin: 2px;            font-family: Helvetica, Arial, sans-serif;            font-size: 9px;            font-weight: bold;            line-height: 15px;            color: rgb(0, 255, 255);
        }        #demo {            width: 74px;            height: 30px;            background: rgb(0, 255, 255);            margin: 2px
        }        span.col {            width: 1px;            height: 100%;            float: left;            opacity: 0.9;            background: rgb(0, 0, 34);
        }    </style></head><body>
    <div style=" opacity: 0.9; cursor: pointer; position: absolute; top: 0px;margin: 10px; background: rgb(0, 0, 34);">
        <div id="title"></div>
        <div id="demo"></div>
    </div>
    <script>
        function fillLineChart(id) {            this.id = id;            this.el = document.getElementById(id);            this.value = 0;//当前值
            this.width = parseInt(this.el.clientWidth)            this.last=this.width-1;//从左往右最后一个span的索引
            for (var i = 0; i < this.width; i++) {//初始化span
                this.el.innerHTML +=&#39;<span class="col"></span>&#39;;
            }            this.draw = function (value) {//绘制事件
                this.value = value;//记录当前值
                for (var i = 0; i <this.last; i++) {//遍历前x-1个,将后一个值赋给前一个
                    var tmph = this.el.getElementsByTagName("span")[i + 1].style.height;//获取下一个值
                    this.el.getElementsByTagName("span")[i].style.height = tmph;//赋给当前的
                }                this.el.getElementsByTagName("span")[this.last].style.height = parseInt(this.el.clientHeight) * (100 - this.value) / 100 + "px";//设置最后span一个高度=span容器的高度x值百分比
            }
        }        var demo = new fillLineChart("demo");        var val = 0
        setInterval(function () {
            val = rand(rand(20, 50), 60);            document.getElementById(&#39;title&#39;).innerHTML = `示例(${val})`
            demo.draw(val);
        }, 100);        function rand(begin, end) {            return Math.floor(Math.random() * (end - begin)) + begin;
        }    </script></body></html>

2.By Canvas =>[예]

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>示例2</title>
    <style>
        #title {            margin: 2px;            font-family: Helvetica, Arial, sans-serif;            font-size: 9px;            font-weight: bold;            line-height: 15px;            color: rgb(0, 255, 255);
        }        #demo { 
            margin: 2px
        }        span.col {            width: 1px;            height: 100%;            float: left;            opacity: 0.9;            background: rgb(0, 0, 34);
        }    </style></head><body>
    <div style=" opacity: 0.9; cursor: pointer; position: absolute; top: 0px;margin: 10px; background: rgb(0, 0, 34);">
        <div id="title"></div>
        <canvas id="demo" width="74" height="30"></canvas>
    </div>
    <script>
        function fillLineChart(id) {            this.id = id;            this.canvas = document.getElementById(id);            this.value = 0;            this.width = (this.canvas.clientWidth)//获取

바인드 너비

           this.height = (this.canvas.clientHeight) //获取高度宽度 
            this.context = this.canvas.getContext("2d");            this.values = [];            this.last = this.width - 1;//最后一个值的索引
            for (var i = 0; i < this.width; i++) {//初始化值
                this.values.push(this.height);
            }            this.draw = function (value) {                this.value = value;//记录当前值
                this.context.clearRect(0, 0, this.width, this.height);//清空
                this.context.beginPath();//开辟新的绘制路径
                this.context.moveTo(0, this.height);//绘制起点 
                for (var i = 0; i <this.last; i++) {                    this.values[i] = this.values[i + 1];//移动索引值
                    this.context.lineTo(i, this.values[i]);//结束位置
                }                this.values[this.last] = this.height * (100 - value) / 100;//获取最后索引一个值
                this.context.lineTo(this.last, this.values[this.last]);//设置最后一个索引位置
                this.context.lineTo(i, this.height);//绘制结束
                this.context.fillStyle = &#39; rgb(0, 255, 255)&#39;;//填充绘制区域的颜色  
                this.context.fill();//填充
            }
        }        var demo = new fillLineChart("demo");        var val = 0
        setInterval(function () {
            val = rand(rand(20, 50), 60);            document.getElementById(&#39;title&#39;).innerHTML = `示例(${val})`
            demo.draw(val);
        }, 100);        function rand(begin, end) {            return Math.floor(Math.random() * (end - begin)) + begin;
        }    </script></body></html>

3.Canvas 향상=>[예]

<!DOCTYPE html><html><head>
   <meta charset="UTF-8">
   <title>示例3</title>
   <style>
       #title {margin: 2px;            font-family: Helvetica, Arial, sans-serif;            font-size: 9px;            font-weight: bold;            line-height: 15px;            color: rgb(0, 255, 255);} 
       #demo {margin: 2px} 
       span.col {            width: 1px;            height: 100%;            float: left;            opacity: 0.9;            background: rgb(0, 0, 34);}    </style></head><body>
   <label ><input type="checkbox" onclick="demo.isFull=this.checked" checked/>填充显示</label>
   <div style=" opacity: 0.9; cursor: pointer; position: absolute; top: 30px;margin: 10px; background: rgb(0, 0, 34);">
       <div id="title"></div>
       <canvas id="demo"></canvas>
   </div>
   <script>
       function lineChart(o) {            this.id = o.id;            this.canvas = document.getElementById(o.id);            this.color = o.color || &#39;rgb(0, 255, 255)&#39;;            this.value = 0;            this.isFull = o.isFull || false;//是否填充颜色
           this.canvas.width = this.width = o.width || (this.canvas.clientWidth);//获取绑定宽度
           this.canvas.height = this.height = o.height || (this.canvas.clientHeight);//获取高度宽度 
           this.context = this.canvas.getContext("2d");            this.values = [];            this.last = this.width - 1;//最后一个值的索引
           for (var i = 0; i < this.width; i++) {//初始化值
               this.values.push(this.height);
           }            this.draw = function (value) {                this.value = value;//记录当前值
               this.context.clearRect(0, 0, this.width, this.height);//清空
               this.context.beginPath();//开辟新的绘制路径
               this.context.moveTo(0, this.isFull ? this.height : this.values[1]);//绘制起点 
               for (var i = 0; i < this.last; i++) {                    this.values[i] = this.values[i + 1];//移动索引值
                   this.context.lineTo(i, this.values[i]);//结束位置
               }                this.values[this.last] = this.height * (100 - value) / 100;//获取最后索引一个值
               this.context.lineTo(this.last, this.values[this.last]);//设置最后一个索引位置
               if (this.isFull) {                    this.context.lineTo(i, this.height);//绘制结束
                   this.context.fillStyle = this.color;//填充绘制区域的颜色
                   this.context.fill();//填充
               } else {                    this.context.strokeStyle = this.color;                    this.context.stroke();
               }
           }
       }        var demo = new lineChart({            id: "demo",            width: "74",            height: "30",            isFull: true,
       });        var val = 0
       setInterval(function () {
           val = rand(rand(20, 50), 60);            document.getElementById(&#39;title&#39;).innerHTML = `示例(${val})`
           demo.draw(val);
       }, 100);        function rand(begin, end) {            return Math.floor(Math.random() * (end - begin)) + begin;
       }    </script></body> </html>

믿거나 not 이 기사의 사례를 읽은 후에는 방법을 익혔습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 기사

H5 코드 이해 : HTML5의 기본 사항Apr 17, 2025 am 12:08 AM

HTML5는 현대적인 웹 페이지를 구축하는 핵심 기술로 많은 새로운 요소와 기능을 제공합니다. 1. HTML5는 웹 페이지 구조 및 SEO를 향상시키는 의미 론적 요소를 소개합니다. 2. 멀티미디어 요소를 지원하고 플러그인없이 미디어를 포함시킵니다. 3. 양식은 새로운 입력 유형 및 검증 속성을 향상시켜 검증 프로세스를 단순화합니다. 4. 웹 페이지 성능 및 사용자 경험을 향상시키기 위해 오프라인 및 로컬 스토리지 기능을 제공합니다.

H5 코드 : 웹 개발자를위한 모범 사례Apr 16, 2025 am 12:14 AM

H5 코드에 대한 모범 사례는 다음과 같습니다. 1. 올바른 문서 선언 및 문자 인코딩 사용; 2. 시맨틱 태그를 사용하십시오. 3. HTTP 요청을 줄입니다. 4. 비동기 부하 사용; 5. 이미지 최적화. 이러한 관행은 웹 페이지의 효율성, 유지 관리 및 사용자 경험을 향상시킬 수 있습니다.

H5 : 웹 표준 및 기술의 발전Apr 15, 2025 am 12:12 AM

웹 표준과 기술은 현재까지 HTML4, CSS2 및 간단한 JavaScript에서 발전했으며 중대한 개발을 거쳤습니다. 1) HTML5는 캔버스 및 웹 스토리지와 같은 API를 도입하여 웹 응용 프로그램의 복잡성과 상호 작용을 향상시킵니다. 2) CSS3은 애니메이션 및 전환 기능을 추가하여 페이지를보다 효과적으로 만듭니다. 3) JavaScript는 화살표 기능 및 클래스와 같은 Node.js 및 ES6의 최신 구문을 통해 개발 효율 및 코드 가독성을 향상시킵니다. 이러한 변경으로 인해 웹 애플리케이션의 성능 최적화 및 모범 사례의 개발이 촉진되었습니다.

H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다Apr 14, 2025 am 12:05 AM

H5는 HTML5의 약어 일뿐 만 아니라 더 넓은 현대 웹 개발 기술 생태계를 나타냅니다. 1. H5는 HTML5, CSS3, JavaScript 및 관련 API 및 기술을 포함합니다. 2. 그것은 더 풍부하고 대화식이며 부드러운 사용자 경험을 제공하며 여러 장치에서 원활하게 실행할 수 있습니다. 3. H5 기술 스택을 사용하여 반응 형 웹 페이지와 복잡한 대화식 기능을 만들 수 있습니다.

H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어Apr 13, 2025 am 12:01 AM

H5 및 HTML5는 동일한 것을, 즉 html5를 나타냅니다. HTML5는 HTML의 다섯 번째 버전으로 시맨틱 태그, 멀티미디어 지원, 캔버스 및 그래픽, 오프라인 스토리지 및 로컬 스토리지와 같은 새로운 기능을 제공하여 웹 페이지의 표현성 및 상호 작용성을 향상시킵니다.

H5는 무엇을 언급합니까? 맥락 탐색Apr 12, 2025 am 12:03 AM

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

H5 : 도구, 프레임 워크 및 모범 사례Apr 11, 2025 am 12:11 AM

H5 개발에서 마스터 해야하는 도구 및 프레임 워크에는 vue.js, React 및 Webpack이 포함됩니다. 1.vue.js는 사용자 인터페이스를 구축하고 구성 요소 개발을 지원하는 데 적합합니다. 2. 복잡한 응용 프로그램에 적합한 가상 DOM을 통해 페이지 렌더링을 최적화합니다. 3. Webpack은 모듈 포장에 사용되며 리소스로드를 최적화합니다.

HTML5의 유산 : 현재 H5 이해Apr 10, 2025 am 09:28 AM

html5hassignificallytransformedwebdevelopmentbyintranticalticlementements, 향상 Multimediasupport 및 Improvingperformance.1) itmadewebsitessmoreaccessibleadseo 친환경적 인 요소, 및 .2) Html5intagnatee

See all articles