(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{25:function(e,a,t){"use strict";var i=t(3);a.a=function(e,a){for(var t=i.a.find(document.getElementById("root"),(function(a){return i.a.hasClass(a,e)})),r=0;r<t.length;r++)t[r].setAttribute("active","no");i.a.find(document.getElementById("root"),(function(t){return i.a.hasClass(t,[e,a])}))[0].setAttribute("active","yes")}},26:function(e,a,t){"use strict";var i=[],r=null;a.a=function(e,a){a=a||0,e=e||document.documentElement;var t=function(){var e=window.location.href.split("?")[1]||"";if(""==e)return{};var a=e.split("&"),t={};return a.forEach((function(e){var a=e.split("=");t[a[0]]=a[1]})),t}().fixed;if(t){var n=document.getElementById("fixed-"+t);if(n){var c=n.offsetTop-a,l=e.scrollTop||0;!function(e,a,t){arguments.length<2&&(a=400);var n={timer:function(e,a,t){if(!e)throw new Error("Tick is required!");var r=(new Date).valueOf()+"_"+(1e3*Math.random()).toFixed(0);return i.push({id:r,createTime:new Date,tick:e,duration:a,callback:t}),n.start(),r},start:function(){r||(r=setInterval(n.tick,13))},tick:function(){var e,a,t,r,c,l,d,u=i;for((i=[]).length=0,a=0;a<u.length;a++)e=(c=u[a]).createTime,t=c.tick,l=c.duration,r=c.callback,!1,(d=(+new Date-e)/l)>=1&&!0,t(d=d>1?1:d),d<1&&c.id?i.push(c):r&&r(d);i.length<=0&&n.stop()},stop:function(){r&&(clearInterval(r),r=null)}},c=n.timer((function(a){e(a)}),a,t)}((function(a){e.scrollTop=(c-l)*a+l}),500,(function(){e.scrollTop=c}))}}else e.scrollTop=0;document.getElementById("root-view").scrollTop=0}},60:function(e,a,t){var i=t(61);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);(0,t(2).default)("data-quickpaper-4a63f230",i,!0)},61:function(e,a,t){(e.exports=t(1)(!1)).push([e.i,"",""])},90:function(e,a,t){"use strict";t.r(a);var i=t(25),r=t(26),n=t(27),c=t.n(n),l=[{name:"group",attrs:{"c-for":"(value,index) in values"},children:[{name:"rect",attrs:{":x":"( _width - 100 ) / values.length * ( index + 0.1 ) + 50",":y":"_height - 50",":width":"( _width - 100 ) / values.length * 0.8",":height":"-1 * ( _height - 100 )","fill-color":"rgba(220, 220, 220, 0.8)",type:"fill"},children:[]},{name:"rect",attrs:{":x":"( _width - 100 ) / values.length * ( index + 0.1 ) + 50",":y":"_height - 50",":width":"( _width - 100 ) / values.length * 0.8",":height":"-0.005 * value * ( _height - 100 )","fill-color":"red",type:"fill"},children:[]}]},{name:"ruler",attrs:{x:"50",":y":"_height - 50",":length":"_width - 100",value:'["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]',"value-position":"between"},children:[]}],d=[{name:"group",attrs:{"c-for":"(value,index) in values"},children:[{name:"rect",attrs:{":x":"( _width - 100 ) / values.length * ( index + 0.1 ) + 50",":y":"_height - 50",":width":"( _width - 100 ) / values.length * 0.8",":height":"-1 * ( _height - 100 )","fill-color":"rgba(220, 220, 220, 0.8)",type:"fill"},children:[]},{name:"rect",attrs:{":x":"( _width - 100 ) / values.length * ( index + 0.1 ) + 50",":y":"_height - 50",":width":"( _width - 100 ) / values.length * 0.8",":height":"-0.005 * value * ( _height - 100 )","fill-color":"red",type:"fill","c-on:click":"doit",":_id":"index"},children:[]}]},{name:"ruler",attrs:{x:"50",":y":"_height - 50",":length":"_width - 100",value:'["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]',"value-position":"between"},children:[]}],u={created:function(){Object(i.a)("menu-2","event")},mounted:function(){Object(r.a)(document.getElementById("course-id"),44),new c.a({el:document.getElementById("canvas-3"),render:l,data:function(){return{values:[120,200,150,80,70,110,130]}}}),new c.a({el:document.getElementById("canvas-4"),render:d,data:function(){return{values:[120,200,150,80,70,110,130]}},methods:{doit:function(e){alert(JSON.stringify(e,null,4))}}})}};t(60);u.render=function(e){return e("div",{quickpaper:"","data-quickpaper-4a63f230":""},[e("div",{class:"doc-view","data-quickpaper-4a63f230":""},[e("header",{id:"fixed-top","data-quickpaper-4a63f230":""},["如何添加图形交互事件"]),e("p",{"data-quickpaper-4a63f230":""},["上一节我们说明了如何使用内置组件绘制一个图形，后续修改数据的时候自动触发绘图更新。如果我们希望和图表交互怎么办？"]),e("h1",{id:"fixed-no-event","data-quickpaper-4a63f230":""},["一个柱状图"]),e("p",{"data-quickpaper-4a63f230":""},["为了方便说明，我们先来绘制一个柱状图，先看看运行效果："]),e("div",{id:"canvas-3",style:"height:360px;","data-quickpaper-4a63f230":""},[]),e("p",{"data-quickpaper-4a63f230":""},["我们就是通过",e("a",{class:"important",target:"_blank",href:"#/api/directive?fixed=c-for","data-quickpaper-4a63f230":""},["c-for"]),"指令，根据数据来循环出需要的矩形，并添加一个刻度尺组件来辅助显示。下面是",e("span",{class:"important","data-quickpaper-4a63f230":""},[".clunch文件"]),"的内容："]),e("pre",{"q-code":"html","data-quickpaper-4a63f230":""},['<group c-for=\'(value,index) in values\'>↵↵    \x3c!-- 背景灰色 --\x3e↵    <rect :x="( _width - 100 ) / values.length * ( index + 0.1 ) + 50" :y="_height - 50"↵        :width="( _width - 100 ) / values.length * 0.8" :height=\'-1 * ( _height - 100 )\'↵        fill-color=\'rgba(220, 220, 220, 0.8)\' type=\'fill\' />↵↵    \x3c!-- 值红色 --\x3e↵    <rect :x="( _width - 100 ) / values.length * ( index + 0.1 ) + 50" :y="_height - 50"↵        :width="( _width - 100 ) / values.length * 0.8" :height=\'-0.005 * value * ( _height - 100 )\'↵        fill-color=\'red\' type=\'fill\' />↵↵</group>↵↵\x3c!-- 横坐标 --\x3e↵<ruler x="50" :y="_height - 50" :length="_width - 100"↵    value=\'["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]\' value-position=\'between\' />']),e("p",{"data-quickpaper-4a63f230":""},["可以发现，使用最基本的一些图形绘制大部分的图形也是非常容易的。"]),e("p",{"data-quickpaper-4a63f230":""},["上面用到的数据",e("span",{class:"public","data-quickpaper-4a63f230":""},["values"]),"内容如下："]),e("pre",{"q-code":"","data-quickpaper-4a63f230":""},["values: [120, 200, 150, 80, 70, 110, 130]"]),e("h1",{id:"fixed-event","data-quickpaper-4a63f230":""},["添加点击事件"]),e("p",{"data-quickpaper-4a63f230":""},["所有的事件都依赖指令",e("a",{href:"#/api/directive?fixed=c-on",target:"_blank","data-quickpaper-4a63f230":""},["c-on"]),"实现，这里也是一样的。"]),e("h3",{id:"fixed-bind","data-quickpaper-4a63f230":""},["使用c-on指令明确绑定的组件"]),e("p",{"data-quickpaper-4a63f230":""},["我们这里需要给红色的矩形添加交互点击反馈，来看看",e("span",{class:"important","data-quickpaper-4a63f230":""},[".clunch文件"]),"中如何修改："]),e("pre",{"q-code":"html","data-quickpaper-4a63f230":""},["\x3c!-- 值红色 --\x3e↵ <rect ... c-on:click='doit'/>"]),e("p",{"data-quickpaper-4a63f230":""},["我们上面只给出了修改的部分。可以看到，就是给需要交互的图形添加了",e("span",{class:"public","data-quickpaper-4a63f230":""},["c-on:click='doit'"]),"这个属性。这表示，点击这个组件的时候，会触发这个回调方法",e("span",{class:"important","data-quickpaper-4a63f230":""},["doit"]),"。"]),e("h3",{id:"fixed-methods","data-quickpaper-4a63f230":""},["添加回调方法"]),e("p",{"data-quickpaper-4a63f230":""},["那么，上面那个",e("span",{class:"important","data-quickpaper-4a63f230":""},["doit"]),"方法在哪里定义？"]),e("pre",{"q-code":"","data-quickpaper-4a63f230":""},["new Clunch({↵    // ......↵    methods:{↵        doit(target){↵            console.log(target);↵        }↵    }↵});"]),e("p",{"data-quickpaper-4a63f230":""},["没错，在创建",e("span",{class:"important","data-quickpaper-4a63f230":""},["Clunch对象"]),"的时候配置。"]),e("p",{"data-quickpaper-4a63f230":""},["下面是运行效果："]),e("div",{id:"canvas-4",style:"height:360px;","data-quickpaper-4a63f230":""},[]),e("p",{"data-quickpaper-4a63f230":""},["点击的时候浏览器就会弹框给出你点击结点的信息（下面是个例子，你可以点击试试）："]),e("pre",{"q-code":"","data-quickpaper-4a63f230":""},['attr: {fill-color: "red", stroke-color: "black", line-width: 1, dash: Array(0), type: "fill", …}↵data: undefined↵id: 6↵left: 601.5↵region: "default"↵series: "rect"↵subRegion: "default"↵top: 195↵__proto__: Object']),e("p",{"data-quickpaper-4a63f230":""},["每项具体什么意思，你可以",e("a",{href:"#/api/directive?fixed=c-on",target:"_blank","data-quickpaper-4a63f230":""},["点击此处"]),"进行查阅，这里就不再赘述了。"]),e("div",{class:"bottom-link","data-quickpaper-4a63f230":""},[e("a",{href:"#/course/introduce?fixed=top",target:"_blank",class:"left","data-quickpaper-4a63f230":""},["上一节：环境搭建和基本使用"]),e("a",{href:"#/course/series?fixed=top",target:"_blank",class:"right","data-quickpaper-4a63f230":""},["下一节：自定义图形组件"])])])])};a.default=u}}]);