1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579 |
- /**
- * @license Highcharts JS v7.0.2 (2019-01-17)
- *
- * 3D features for Highcharts JS
- *
- * @license: www.highcharts.com/license
- */
- 'use strict';
- (function (factory) {
- if (typeof module === 'object' && module.exports) {
- factory['default'] = factory;
- module.exports = factory;
- } else if (typeof define === 'function' && define.amd) {
- define(function () {
- return factory;
- });
- } else {
- factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
- }
- }(function (Highcharts) {
- (function (H) {
- /* *
- * (c) 2010-2019 Torstein Honsi
- *
- * License: www.highcharts.com/license
- */
- // Mathematical Functionility
- var deg2rad = H.deg2rad,
- pick = H.pick;
- /* eslint-disable max-len */
- /**
- * Apply 3-D rotation
- * Euler Angles (XYZ):
- * cosA = cos(Alfa|Roll)
- * cosB = cos(Beta|Pitch)
- * cosG = cos(Gamma|Yaw)
- *
- * Composite rotation:
- * | cosB * cosG | cosB * sinG | -sinB |
- * | sinA * sinB * cosG - cosA * sinG | sinA * sinB * sinG + cosA * cosG | sinA * cosB |
- * | cosA * sinB * cosG + sinA * sinG | cosA * sinB * sinG - sinA * cosG | cosA * cosB |
- *
- * Now, Gamma/Yaw is not used (angle=0), so we assume cosG = 1 and sinG = 0, so
- * we get:
- * | cosB | 0 | - sinB |
- * | sinA * sinB | cosA | sinA * cosB |
- * | cosA * sinB | - sinA | cosA * cosB |
- *
- * But in browsers, y is reversed, so we get sinA => -sinA. The general result
- * is:
- * | cosB | 0 | - sinB | | x | | px |
- * | - sinA * sinB | cosA | - sinA * cosB | x | y | = | py |
- * | cosA * sinB | sinA | cosA * cosB | | z | | pz |
- *
- * @private
- * @function rotate3D
- */
- /* eslint-enable max-len */
- function rotate3D(x, y, z, angles) {
- return {
- x: angles.cosB * x - angles.sinB * z,
- y: -angles.sinA * angles.sinB * x + angles.cosA * y -
- angles.cosB * angles.sinA * z,
- z: angles.cosA * angles.sinB * x + angles.sinA * y +
- angles.cosA * angles.cosB * z
- };
- }
- // Perspective3D function is available in global Highcharts scope because is
- // needed also outside of perspective() function (#8042).
- H.perspective3D = function (coordinate, origin, distance) {
- var projection = ((distance > 0) && (distance < Number.POSITIVE_INFINITY)) ?
- distance / (coordinate.z + origin.z + distance) :
- 1;
- return {
- x: coordinate.x * projection,
- y: coordinate.y * projection
- };
- };
- /**
- * Transforms a given array of points according to the angles in chart.options.
- *
- * @private
- * @function Highcharts.perspective
- *
- * @param {Array<Highcharts.Point>} points
- * The array of points
- *
- * @param {Highcharts.Chart} chart
- * The chart
- *
- * @param {boolean} [insidePlotArea]
- * Wether to verifiy the points are inside the plotArea
- *
- * @return {Array<Highcharts.Point>}
- * An array of transformed points
- */
- H.perspective = function (points, chart, insidePlotArea) {
- var options3d = chart.options.chart.options3d,
- inverted = insidePlotArea ? chart.inverted : false,
- origin = {
- x: chart.plotWidth / 2,
- y: chart.plotHeight / 2,
- z: options3d.depth / 2,
- vd: pick(options3d.depth, 1) * pick(options3d.viewDistance, 0)
- },
- scale = chart.scale3d || 1,
- beta = deg2rad * options3d.beta * (inverted ? -1 : 1),
- alpha = deg2rad * options3d.alpha * (inverted ? -1 : 1),
- angles = {
- cosA: Math.cos(alpha),
- cosB: Math.cos(-beta),
- sinA: Math.sin(alpha),
- sinB: Math.sin(-beta)
- };
- if (!insidePlotArea) {
- origin.x += chart.plotLeft;
- origin.y += chart.plotTop;
- }
- // Transform each point
- return points.map(function (point) {
- var rotated = rotate3D(
- (inverted ? point.y : point.x) - origin.x,
- (inverted ? point.x : point.y) - origin.y,
- (point.z || 0) - origin.z,
- angles
- ),
- // Apply perspective
- coordinate = H.perspective3D(rotated, origin, origin.vd);
- // Apply translation
- coordinate.x = coordinate.x * scale + origin.x;
- coordinate.y = coordinate.y * scale + origin.y;
- coordinate.z = rotated.z * scale + origin.z;
- return {
- x: (inverted ? coordinate.y : coordinate.x),
- y: (inverted ? coordinate.x : coordinate.y),
- z: coordinate.z
- };
- });
- };
- /**
- * Calculate a distance from camera to points - made for calculating zIndex of
- * scatter points.
- *
- * @private
- * @function Highcharts.pointCameraDistance
- *
- * @param {object} coordinates
- * The coordinates of the specific point
- *
- * @param {Highcharts.Chart} chart
- * The chart
- *
- * @return {number}
- * A distance from camera to point
- */
- H.pointCameraDistance = function (coordinates, chart) {
- var options3d = chart.options.chart.options3d,
- cameraPosition = {
- x: chart.plotWidth / 2,
- y: chart.plotHeight / 2,
- z: pick(options3d.depth, 1) * pick(options3d.viewDistance, 0) +
- options3d.depth
- },
- distance = Math.sqrt(
- Math.pow(cameraPosition.x - coordinates.plotX, 2) +
- Math.pow(cameraPosition.y - coordinates.plotY, 2) +
- Math.pow(cameraPosition.z - coordinates.plotZ, 2)
- );
- return distance;
- };
- /**
- * Calculate area of a 2D polygon using Shoelace algorithm
- * http://en.wikipedia.org/wiki/Shoelace_formula
- *
- * @private
- * @function Highcharts.shapeArea
- *
- * @param {Array<object>} vertexes
- *
- * @return {number}
- */
- H.shapeArea = function (vertexes) {
- var area = 0,
- i,
- j;
- for (i = 0; i < vertexes.length; i++) {
- j = (i + 1) % vertexes.length;
- area += vertexes[i].x * vertexes[j].y - vertexes[j].x * vertexes[i].y;
- }
- return area / 2;
- };
- /**
- * Calculate area of a 3D polygon after perspective projection
- *
- * @private
- * @function Highcharts.shapeArea3d
- *
- * @param {Array<object>} vertexes
- *
- * @param {Highcharts.Chart} chart
- *
- * @param {boolean} [insidePlotArea]
- *
- * @return {number}
- */
- H.shapeArea3d = function (vertexes, chart, insidePlotArea) {
- return H.shapeArea(H.perspective(vertexes, chart, insidePlotArea));
- };
- }(Highcharts));
- (function (H) {
- /* *
- * (c) 2010-2019 Torstein Honsi
- *
- * Extensions to the SVGRenderer class to enable 3D shapes
- *
- * License: www.highcharts.com/license
- */
- var cos = Math.cos,
- PI = Math.PI,
- sin = Math.sin;
- var animObject = H.animObject,
- charts = H.charts,
- color = H.color,
- defined = H.defined,
- deg2rad = H.deg2rad,
- extend = H.extend,
- merge = H.merge,
- perspective = H.perspective,
- pick = H.pick,
- SVGElement = H.SVGElement,
- SVGRenderer = H.SVGRenderer,
- dFactor,
- element3dMethods,
- cuboidMethods;
- /*
- EXTENSION TO THE SVG-RENDERER TO ENABLE 3D SHAPES
- */
- // HELPER METHODS
- dFactor = (4 * (Math.sqrt(2) - 1) / 3) / (PI / 2);
- // Method to construct a curved path. Can 'wrap' around more then 180 degrees
- function curveTo(cx, cy, rx, ry, start, end, dx, dy) {
- var result = [],
- arcAngle = end - start;
- if ((end > start) && (end - start > Math.PI / 2 + 0.0001)) {
- result = result.concat(
- curveTo(cx, cy, rx, ry, start, start + (Math.PI / 2), dx, dy)
- );
- result = result.concat(
- curveTo(cx, cy, rx, ry, start + (Math.PI / 2), end, dx, dy)
- );
- return result;
- }
- if ((end < start) && (start - end > Math.PI / 2 + 0.0001)) {
- result = result.concat(
- curveTo(cx, cy, rx, ry, start, start - (Math.PI / 2), dx, dy)
- );
- result = result.concat(
- curveTo(cx, cy, rx, ry, start - (Math.PI / 2), end, dx, dy)
- );
- return result;
- }
- return [
- 'C',
- cx + (rx * Math.cos(start)) -
- ((rx * dFactor * arcAngle) * Math.sin(start)) + dx,
- cy + (ry * Math.sin(start)) +
- ((ry * dFactor * arcAngle) * Math.cos(start)) + dy,
- cx + (rx * Math.cos(end)) +
- ((rx * dFactor * arcAngle) * Math.sin(end)) + dx,
- cy + (ry * Math.sin(end)) -
- ((ry * dFactor * arcAngle) * Math.cos(end)) + dy,
- cx + (rx * Math.cos(end)) + dx,
- cy + (ry * Math.sin(end)) + dy
- ];
- }
- SVGRenderer.prototype.toLinePath = function (points, closed) {
- var result = [];
- // Put "L x y" for each point
- points.forEach(function (point) {
- result.push('L', point.x, point.y);
- });
- if (points.length) {
- // Set the first element to M
- result[0] = 'M';
- // If it is a closed line, add Z
- if (closed) {
- result.push('Z');
- }
- }
- return result;
- };
- SVGRenderer.prototype.toLineSegments = function (points) {
- var result = [],
- m = true;
- points.forEach(function (point) {
- result.push(m ? 'M' : 'L', point.x, point.y);
- m = !m;
- });
- return result;
- };
- // A 3-D Face is defined by it's 3D vertexes, and is only visible if it's
- // vertexes are counter-clockwise (Back-face culling). It is used as a
- // polyhedron Element
- SVGRenderer.prototype.face3d = function (args) {
- var renderer = this,
- ret = this.createElement('path');
- ret.vertexes = [];
- ret.insidePlotArea = false;
- ret.enabled = true;
- ret.attr = function (hash) {
- if (
- typeof hash === 'object' &&
- (
- defined(hash.enabled) ||
- defined(hash.vertexes) ||
- defined(hash.insidePlotArea)
- )
- ) {
- this.enabled = pick(hash.enabled, this.enabled);
- this.vertexes = pick(hash.vertexes, this.vertexes);
- this.insidePlotArea = pick(
- hash.insidePlotArea,
- this.insidePlotArea
- );
- delete hash.enabled;
- delete hash.vertexes;
- delete hash.insidePlotArea;
- var chart = charts[renderer.chartIndex],
- vertexes2d = perspective(
- this.vertexes,
- chart,
- this.insidePlotArea
- ),
- path = renderer.toLinePath(vertexes2d, true),
- area = H.shapeArea(vertexes2d),
- visibility = (this.enabled && area > 0) ? 'visible' : 'hidden';
- hash.d = path;
- hash.visibility = visibility;
- }
- return SVGElement.prototype.attr.apply(this, arguments);
- };
- ret.animate = function (params) {
- if (
- typeof params === 'object' &&
- (
- defined(params.enabled) ||
- defined(params.vertexes) ||
- defined(params.insidePlotArea)
- )
- ) {
- this.enabled = pick(params.enabled, this.enabled);
- this.vertexes = pick(params.vertexes, this.vertexes);
- this.insidePlotArea = pick(
- params.insidePlotArea,
- this.insidePlotArea
- );
- delete params.enabled;
- delete params.vertexes;
- delete params.insidePlotArea;
- var chart = charts[renderer.chartIndex],
- vertexes2d = perspective(
- this.vertexes,
- chart,
- this.insidePlotArea
- ),
- path = renderer.toLinePath(vertexes2d, true),
- area = H.shapeArea(vertexes2d),
- visibility = (this.enabled && area > 0) ? 'visible' : 'hidden';
- params.d = path;
- this.attr('visibility', visibility);
- }
- return SVGElement.prototype.animate.apply(this, arguments);
- };
- return ret.attr(args);
- };
- // A Polyhedron is a handy way of defining a group of 3-D faces. It's only
- // attribute is `faces`, an array of attributes of each one of it's Face3D
- // instances.
- SVGRenderer.prototype.polyhedron = function (args) {
- var renderer = this,
- result = this.g(),
- destroy = result.destroy;
- if (!this.styledMode) {
- result.attr({
- 'stroke-linejoin': 'round'
- });
- }
- result.faces = [];
- // destroy all children
- result.destroy = function () {
- for (var i = 0; i < result.faces.length; i++) {
- result.faces[i].destroy();
- }
- return destroy.call(this);
- };
- result.attr = function (hash, val, complete, continueAnimation) {
- if (typeof hash === 'object' && defined(hash.faces)) {
- while (result.faces.length > hash.faces.length) {
- result.faces.pop().destroy();
- }
- while (result.faces.length < hash.faces.length) {
- result.faces.push(renderer.face3d().add(result));
- }
- for (var i = 0; i < hash.faces.length; i++) {
- if (renderer.styledMode) {
- delete hash.faces[i].fill;
- }
- result.faces[i].attr(
- hash.faces[i],
- null,
- complete,
- continueAnimation
- );
- }
- delete hash.faces;
- }
- return SVGElement.prototype.attr.apply(this, arguments);
- };
- result.animate = function (params, duration, complete) {
- if (params && params.faces) {
- while (result.faces.length > params.faces.length) {
- result.faces.pop().destroy();
- }
- while (result.faces.length < params.faces.length) {
- result.faces.push(renderer.face3d().add(result));
- }
- for (var i = 0; i < params.faces.length; i++) {
- result.faces[i].animate(params.faces[i], duration, complete);
- }
- delete params.faces;
- }
- return SVGElement.prototype.animate.apply(this, arguments);
- };
- return result.attr(args);
- };
- // Base, abstract prototype member for 3D elements
- element3dMethods = {
- // The init is used by base - renderer.Element
- initArgs: function (args) {
- var elem3d = this,
- renderer = elem3d.renderer,
- paths = renderer[elem3d.pathType + 'Path'](args),
- zIndexes = paths.zIndexes;
- // build parts
- elem3d.parts.forEach(function (part) {
- elem3d[part] = renderer.path(paths[part]).attr({
- 'class': 'highcharts-3d-' + part,
- zIndex: zIndexes[part] || 0
- }).add(elem3d);
- });
- elem3d.attr({
- 'stroke-linejoin': 'round',
- zIndex: zIndexes.group
- });
- // store original destroy
- elem3d.originalDestroy = elem3d.destroy;
- elem3d.destroy = elem3d.destroyParts;
- },
- // Single property setter that applies options to each part
- singleSetterForParts: function (
- prop, val, values, verb, duration, complete
- ) {
- var elem3d = this,
- newAttr = {},
- optionsToApply = [null, null, (verb || 'attr'), duration, complete],
- hasZIndexes = values && values.zIndexes;
- if (!values) {
- newAttr[prop] = val;
- optionsToApply[0] = newAttr;
- } else {
- H.objectEach(values, function (partVal, part) {
- newAttr[part] = {};
- newAttr[part][prop] = partVal;
- // include zIndexes if provided
- if (hasZIndexes) {
- newAttr[part].zIndex = values.zIndexes[part] || 0;
- }
- });
- optionsToApply[1] = newAttr;
- }
- return elem3d.processParts.apply(elem3d, optionsToApply);
- },
- // Calls function for each part. Used for attr, animate and destroy.
- processParts: function (props, partsProps, verb, duration, complete) {
- var elem3d = this;
- elem3d.parts.forEach(function (part) {
- // if different props for different parts
- if (partsProps) {
- props = H.pick(partsProps[part], false);
- }
- // only if something to set, but allow undefined
- if (props !== false) {
- elem3d[part][verb](props, duration, complete);
- }
- });
- return elem3d;
- },
- // Destroy all parts
- destroyParts: function () {
- this.processParts(null, null, 'destroy');
- return this.originalDestroy();
- }
- };
- // CUBOID
- cuboidMethods = H.merge(element3dMethods, {
- parts: ['front', 'top', 'side'],
- pathType: 'cuboid',
- attr: function (args, val, complete, continueAnimation) {
- // Resolve setting attributes by string name
- if (typeof args === 'string' && typeof val !== 'undefined') {
- var key = args;
- args = {};
- args[key] = val;
- }
- if (args.shapeArgs || defined(args.x)) {
- return this.singleSetterForParts(
- 'd',
- null,
- this.renderer[this.pathType + 'Path'](args.shapeArgs || args)
- );
- }
- return SVGElement.prototype.attr.call(
- this, args, undefined, complete, continueAnimation
- );
- },
- animate: function (args, duration, complete) {
- if (defined(args.x) && defined(args.y)) {
- var paths = this.renderer[this.pathType + 'Path'](args);
- this.singleSetterForParts(
- 'd', null, paths, 'animate', duration, complete
- );
- this.attr({
- zIndex: paths.zIndexes.group
- });
- } else if (args.opacity) {
- this.processParts(args, null, 'animate', duration, complete);
- } else {
- SVGElement.prototype.animate.call(this, args, duration, complete);
- }
- return this;
- },
- fillSetter: function (fill) {
- this.singleSetterForParts('fill', null, {
- front: fill,
- top: color(fill).brighten(0.1).get(),
- side: color(fill).brighten(-0.1).get()
- });
- // fill for animation getter (#6776)
- this.color = this.fill = fill;
- return this;
- },
- opacitySetter: function (opacity) {
- return this.singleSetterForParts('opacity', opacity);
- }
- });
- // set them up
- SVGRenderer.prototype.elements3d = {
- base: element3dMethods,
- cuboid: cuboidMethods
- };
- // return result, generalization
- SVGRenderer.prototype.element3d = function (type, shapeArgs) {
- // base
- var ret = this.g();
- // extend
- H.extend(ret, this.elements3d[type]);
- // init
- ret.initArgs(shapeArgs);
- // return
- return ret;
- };
- // generelized, so now use simply
- SVGRenderer.prototype.cuboid = function (shapeArgs) {
- return this.element3d('cuboid', shapeArgs);
- };
- // Generates a cuboid path and zIndexes
- H.SVGRenderer.prototype.cuboidPath = function (shapeArgs) {
- var x = shapeArgs.x,
- y = shapeArgs.y,
- z = shapeArgs.z,
- h = shapeArgs.height,
- w = shapeArgs.width,
- d = shapeArgs.depth,
- chart = charts[this.chartIndex],
- front,
- back,
- top,
- bottom,
- left,
- right,
- shape,
- path1,
- path2,
- path3,
- isFront,
- isTop,
- isRight,
- options3d = chart.options.chart.options3d,
- alpha = options3d.alpha,
- // Priority for x axis is the biggest,
- // because of x direction has biggest influence on zIndex
- incrementX = 10000,
- // y axis has the smallest priority in case of our charts
- // (needs to be set because of stacking)
- incrementY = 10,
- incrementZ = 100,
- zIndex = 0,
- // The 8 corners of the cube
- pArr = [{
- x: x,
- y: y,
- z: z
- }, {
- x: x + w,
- y: y,
- z: z
- }, {
- x: x + w,
- y: y + h,
- z: z
- }, {
- x: x,
- y: y + h,
- z: z
- }, {
- x: x,
- y: y + h,
- z: z + d
- }, {
- x: x + w,
- y: y + h,
- z: z + d
- }, {
- x: x + w,
- y: y,
- z: z + d
- }, {
- x: x,
- y: y,
- z: z + d
- }],
- pickShape;
- // apply perspective
- pArr = perspective(pArr, chart, shapeArgs.insidePlotArea);
- // helper method to decide which side is visible
- function mapPath(i) {
- return pArr[i];
- }
- /* *
- * First value - path with specific side
- * Second value - added information about side for later calculations.
- * Possible second values are 0 for path1, 1 for path2 and -1 for no path
- * chosen.
- */
- pickShape = function (path1, path2) {
- var ret = [
- [], -1
- ];
- path1 = path1.map(mapPath);
- path2 = path2.map(mapPath);
- if (H.shapeArea(path1) < 0) {
- ret = [path1, 0];
- } else if (H.shapeArea(path2) < 0) {
- ret = [path2, 1];
- }
- return ret;
- };
- // front or back
- front = [3, 2, 1, 0];
- back = [7, 6, 5, 4];
- shape = pickShape(front, back);
- path1 = shape[0];
- isFront = shape[1];
- // top or bottom
- top = [1, 6, 7, 0];
- bottom = [4, 5, 2, 3];
- shape = pickShape(top, bottom);
- path2 = shape[0];
- isTop = shape[1];
- // side
- right = [1, 2, 5, 6];
- left = [0, 7, 4, 3];
- shape = pickShape(right, left);
- path3 = shape[0];
- isRight = shape[1];
- /* New block used for calculating zIndex. It is basing on X, Y and Z
- position of specific columns. All zIndexes (for X, Y and Z values) are
- added to the final zIndex, where every value has different priority. The
- biggest priority is in X and Z directions, the lowest index is for
- stacked columns (Y direction and the same X and Z positions). Big
- differences between priorities is made because we need to ensure that
- even for big changes in Y and Z parameters all columns will be drawn
- correctly. */
- if (isRight === 1) {
- zIndex += incrementX * (1000 - x);
- } else if (!isRight) {
- zIndex += incrementX * x;
- }
- zIndex += incrementY * (
- !isTop ||
- // Numbers checked empirically
- (alpha >= 0 && alpha <= 180 || alpha < 360 && alpha > 357.5) ?
- chart.plotHeight - y : 10 + y
- );
- if (isFront === 1) {
- zIndex += incrementZ * (z);
- } else if (!isFront) {
- zIndex += incrementZ * (1000 - z);
- }
- return {
- front: this.toLinePath(path1, true),
- top: this.toLinePath(path2, true),
- side: this.toLinePath(path3, true),
- zIndexes: {
- group: Math.round(zIndex)
- },
- // additional info about zIndexes
- isFront: isFront,
- isTop: isTop
- }; // #4774
- };
- // SECTORS //
- H.SVGRenderer.prototype.arc3d = function (attribs) {
- var wrapper = this.g(),
- renderer = wrapper.renderer,
- customAttribs = ['x', 'y', 'r', 'innerR', 'start', 'end'];
- // Get custom attributes. Don't mutate the original object and return an
- // object with only custom attr.
- function suckOutCustom(params) {
- var hasCA = false,
- ca = {},
- key;
- params = merge(params); // Don't mutate the original object
- for (key in params) {
- if (customAttribs.indexOf(key) !== -1) {
- ca[key] = params[key];
- delete params[key];
- hasCA = true;
- }
- }
- return hasCA ? ca : false;
- }
- attribs = merge(attribs);
- attribs.alpha = (attribs.alpha || 0) * deg2rad;
- attribs.beta = (attribs.beta || 0) * deg2rad;
- // Create the different sub sections of the shape
- wrapper.top = renderer.path();
- wrapper.side1 = renderer.path();
- wrapper.side2 = renderer.path();
- wrapper.inn = renderer.path();
- wrapper.out = renderer.path();
- // Add all faces
- wrapper.onAdd = function () {
- var parent = wrapper.parentGroup,
- className = wrapper.attr('class');
- wrapper.top.add(wrapper);
- // These faces are added outside the wrapper group because the z index
- // relates to neighbour elements as well
- ['out', 'inn', 'side1', 'side2'].forEach(function (face) {
- wrapper[face]
- .attr({
- 'class': className + ' highcharts-3d-side'
- })
- .add(parent);
- });
- };
- // Cascade to faces
- ['addClass', 'removeClass'].forEach(function (fn) {
- wrapper[fn] = function () {
- var args = arguments;
- ['top', 'out', 'inn', 'side1', 'side2'].forEach(function (face) {
- wrapper[face][fn].apply(wrapper[face], args);
- });
- };
- });
- // Compute the transformed paths and set them to the composite shapes
- wrapper.setPaths = function (attribs) {
- var paths = wrapper.renderer.arc3dPath(attribs),
- zIndex = paths.zTop * 100;
- wrapper.attribs = attribs;
- wrapper.top.attr({ d: paths.top, zIndex: paths.zTop });
- wrapper.inn.attr({ d: paths.inn, zIndex: paths.zInn });
- wrapper.out.attr({ d: paths.out, zIndex: paths.zOut });
- wrapper.side1.attr({ d: paths.side1, zIndex: paths.zSide1 });
- wrapper.side2.attr({ d: paths.side2, zIndex: paths.zSide2 });
- // show all children
- wrapper.zIndex = zIndex;
- wrapper.attr({ zIndex: zIndex });
- // Set the radial gradient center the first time
- if (attribs.center) {
- wrapper.top.setRadialReference(attribs.center);
- delete attribs.center;
- }
- };
- wrapper.setPaths(attribs);
- // Apply the fill to the top and a darker shade to the sides
- wrapper.fillSetter = function (value) {
- var darker = color(value).brighten(-0.1).get();
- this.fill = value;
- this.side1.attr({ fill: darker });
- this.side2.attr({ fill: darker });
- this.inn.attr({ fill: darker });
- this.out.attr({ fill: darker });
- this.top.attr({ fill: value });
- return this;
- };
- // Apply the same value to all. These properties cascade down to the
- // children when set to the composite arc3d.
- ['opacity', 'translateX', 'translateY', 'visibility'].forEach(
- function (setter) {
- wrapper[setter + 'Setter'] = function (value, key) {
- wrapper[key] = value;
- ['out', 'inn', 'side1', 'side2', 'top'].forEach(function (el) {
- wrapper[el].attr(key, value);
- });
- };
- }
- );
- // Override attr to remove shape attributes and use those to set child paths
- wrapper.attr = function (params) {
- var ca;
- if (typeof params === 'object') {
- ca = suckOutCustom(params);
- if (ca) {
- extend(wrapper.attribs, ca);
- wrapper.setPaths(wrapper.attribs);
- }
- }
- return SVGElement.prototype.attr.apply(wrapper, arguments);
- };
- // Override the animate function by sucking out custom parameters related to
- // the shapes directly, and update the shapes from the animation step.
- wrapper.animate = function (params, animation, complete) {
- var ca,
- from = this.attribs,
- to,
- anim,
- randomProp = 'data-' + Math.random().toString(26).substring(2, 9);
- // Attribute-line properties connected to 3D. These shouldn't have been
- // in the attribs collection in the first place.
- delete params.center;
- delete params.z;
- delete params.depth;
- delete params.alpha;
- delete params.beta;
- anim = animObject(pick(animation, this.renderer.globalAnimation));
- if (anim.duration) {
- ca = suckOutCustom(params);
- // Params need to have a property in order for the step to run
- // (#5765, #7097, #7437)
- wrapper[randomProp] = 0;
- params[randomProp] = 1;
- wrapper[randomProp + 'Setter'] = H.noop;
- if (ca) {
- to = ca;
- anim.step = function (a, fx) {
- function interpolate(key) {
- return from[key] +
- (pick(to[key], from[key]) - from[key]) * fx.pos;
- }
- if (fx.prop === randomProp) {
- fx.elem.setPaths(merge(from, {
- x: interpolate('x'),
- y: interpolate('y'),
- r: interpolate('r'),
- innerR: interpolate('innerR'),
- start: interpolate('start'),
- end: interpolate('end')
- }));
- }
- };
- }
- animation = anim; // Only when duration (#5572)
- }
- return SVGElement.prototype.animate.call(
- this,
- params,
- animation,
- complete
- );
- };
- // destroy all children
- wrapper.destroy = function () {
- this.top.destroy();
- this.out.destroy();
- this.inn.destroy();
- this.side1.destroy();
- this.side2.destroy();
- SVGElement.prototype.destroy.call(this);
- };
- // hide all children
- wrapper.hide = function () {
- this.top.hide();
- this.out.hide();
- this.inn.hide();
- this.side1.hide();
- this.side2.hide();
- };
- wrapper.show = function (inherit) {
- this.top.show(inherit);
- this.out.show(inherit);
- this.inn.show(inherit);
- this.side1.show(inherit);
- this.side2.show(inherit);
- };
- return wrapper;
- };
- // Generate the paths required to draw a 3D arc
- SVGRenderer.prototype.arc3dPath = function (shapeArgs) {
- var cx = shapeArgs.x, // x coordinate of the center
- cy = shapeArgs.y, // y coordinate of the center
- start = shapeArgs.start, // start angle
- end = shapeArgs.end - 0.00001, // end angle
- r = shapeArgs.r, // radius
- ir = shapeArgs.innerR || 0, // inner radius
- d = shapeArgs.depth || 0, // depth
- alpha = shapeArgs.alpha, // alpha rotation of the chart
- beta = shapeArgs.beta; // beta rotation of the chart
- // Derived Variables
- var cs = Math.cos(start), // cosinus of the start angle
- ss = Math.sin(start), // sinus of the start angle
- ce = Math.cos(end), // cosinus of the end angle
- se = Math.sin(end), // sinus of the end angle
- rx = r * Math.cos(beta), // x-radius
- ry = r * Math.cos(alpha), // y-radius
- irx = ir * Math.cos(beta), // x-radius (inner)
- iry = ir * Math.cos(alpha), // y-radius (inner)
- dx = d * Math.sin(beta), // distance between top and bottom in x
- dy = d * Math.sin(alpha); // distance between top and bottom in y
- // TOP
- var top = ['M', cx + (rx * cs), cy + (ry * ss)];
- top = top.concat(curveTo(cx, cy, rx, ry, start, end, 0, 0));
- top = top.concat([
- 'L', cx + (irx * ce), cy + (iry * se)
- ]);
- top = top.concat(curveTo(cx, cy, irx, iry, end, start, 0, 0));
- top = top.concat(['Z']);
- // OUTSIDE
- var b = (beta > 0 ? Math.PI / 2 : 0),
- a = (alpha > 0 ? 0 : Math.PI / 2);
- var start2 = start > -b ? start : (end > -b ? -b : start),
- end2 = end < PI - a ? end : (start < PI - a ? PI - a : end),
- midEnd = 2 * PI - a;
- // When slice goes over bottom middle, need to add both, left and right
- // outer side. Additionally, when we cross right hand edge, create sharp
- // edge. Outer shape/wall:
- //
- // -------
- // / ^ \
- // 4) / / \ \ 1)
- // / / \ \
- // / / \ \
- // (c)=> ==== ==== <=(d)
- // \ \ / /
- // \ \<=(a)/ /
- // \ \ / / <=(b)
- // 3) \ v / 2)
- // -------
- //
- // (a) - inner side
- // (b) - outer side
- // (c) - left edge (sharp)
- // (d) - right edge (sharp)
- // 1..n - rendering order for startAngle = 0, when set to e.g 90, order
- // changes clockwise (1->2, 2->3, n->1) and counterclockwise for negative
- // startAngle
- var out = ['M', cx + (rx * cos(start2)), cy + (ry * sin(start2))];
- out = out.concat(curveTo(cx, cy, rx, ry, start2, end2, 0, 0));
- // When shape is wide, it can cross both, (c) and (d) edges, when using
- // startAngle
- if (end > midEnd && start < midEnd) {
- // Go to outer side
- out = out.concat([
- 'L', cx + (rx * cos(end2)) + dx, cy + (ry * sin(end2)) + dy
- ]);
- // Curve to the right edge of the slice (d)
- out = out.concat(curveTo(cx, cy, rx, ry, end2, midEnd, dx, dy));
- // Go to the inner side
- out = out.concat([
- 'L', cx + (rx * cos(midEnd)), cy + (ry * sin(midEnd))
- ]);
- // Curve to the true end of the slice
- out = out.concat(curveTo(cx, cy, rx, ry, midEnd, end, 0, 0));
- // Go to the outer side
- out = out.concat([
- 'L', cx + (rx * cos(end)) + dx, cy + (ry * sin(end)) + dy
- ]);
- // Go back to middle (d)
- out = out.concat(curveTo(cx, cy, rx, ry, end, midEnd, dx, dy));
- out = out.concat([
- 'L', cx + (rx * cos(midEnd)), cy + (ry * sin(midEnd))
- ]);
- // Go back to the left edge
- out = out.concat(curveTo(cx, cy, rx, ry, midEnd, end2, 0, 0));
- // But shape can cross also only (c) edge:
- } else if (end > PI - a && start < PI - a) {
- // Go to outer side
- out = out.concat([
- 'L',
- cx + (rx * Math.cos(end2)) + dx,
- cy + (ry * Math.sin(end2)) + dy
- ]);
- // Curve to the true end of the slice
- out = out.concat(curveTo(cx, cy, rx, ry, end2, end, dx, dy));
- // Go to the inner side
- out = out.concat([
- 'L', cx + (rx * Math.cos(end)), cy + (ry * Math.sin(end))
- ]);
- // Go back to the artifical end2
- out = out.concat(curveTo(cx, cy, rx, ry, end, end2, 0, 0));
- }
- out = out.concat([
- 'L', cx + (rx * Math.cos(end2)) + dx, cy + (ry * Math.sin(end2)) + dy
- ]);
- out = out.concat(curveTo(cx, cy, rx, ry, end2, start2, dx, dy));
- out = out.concat(['Z']);
- // INSIDE
- var inn = ['M', cx + (irx * cs), cy + (iry * ss)];
- inn = inn.concat(curveTo(cx, cy, irx, iry, start, end, 0, 0));
- inn = inn.concat([
- 'L', cx + (irx * Math.cos(end)) + dx, cy + (iry * Math.sin(end)) + dy
- ]);
- inn = inn.concat(curveTo(cx, cy, irx, iry, end, start, dx, dy));
- inn = inn.concat(['Z']);
- // SIDES
- var side1 = [
- 'M', cx + (rx * cs), cy + (ry * ss),
- 'L', cx + (rx * cs) + dx, cy + (ry * ss) + dy,
- 'L', cx + (irx * cs) + dx, cy + (iry * ss) + dy,
- 'L', cx + (irx * cs), cy + (iry * ss),
- 'Z'
- ];
- var side2 = [
- 'M', cx + (rx * ce), cy + (ry * se),
- 'L', cx + (rx * ce) + dx, cy + (ry * se) + dy,
- 'L', cx + (irx * ce) + dx, cy + (iry * se) + dy,
- 'L', cx + (irx * ce), cy + (iry * se),
- 'Z'
- ];
- // correction for changed position of vanishing point caused by alpha and
- // beta rotations
- var angleCorr = Math.atan2(dy, -dx),
- angleEnd = Math.abs(end + angleCorr),
- angleStart = Math.abs(start + angleCorr),
- angleMid = Math.abs((start + end) / 2 + angleCorr);
- // set to 0-PI range
- function toZeroPIRange(angle) {
- angle = angle % (2 * Math.PI);
- if (angle > Math.PI) {
- angle = 2 * Math.PI - angle;
- }
- return angle;
- }
- angleEnd = toZeroPIRange(angleEnd);
- angleStart = toZeroPIRange(angleStart);
- angleMid = toZeroPIRange(angleMid);
- // *1e5 is to compensate pInt in zIndexSetter
- var incPrecision = 1e5,
- a1 = angleMid * incPrecision,
- a2 = angleStart * incPrecision,
- a3 = angleEnd * incPrecision;
- return {
- top: top,
- // max angle is PI, so this is always higher
- zTop: Math.PI * incPrecision + 1,
- out: out,
- zOut: Math.max(a1, a2, a3),
- inn: inn,
- zInn: Math.max(a1, a2, a3),
- side1: side1,
- zSide1: a3 * 0.99, // to keep below zOut and zInn in case of same values
- side2: side2,
- zSide2: a2 * 0.99
- };
- };
- }(Highcharts));
- (function (H) {
- /* *
- * (c) 2010-2019 Torstein Honsi
- *
- * Extension for 3D charts
- *
- * License: www.highcharts.com/license
- */
- var addEvent = H.addEvent,
- Chart = H.Chart,
- merge = H.merge,
- perspective = H.perspective,
- pick = H.pick,
- wrap = H.wrap;
- // Shorthand to check the is3d flag
- Chart.prototype.is3d = function () {
- return (
- this.options.chart.options3d &&
- this.options.chart.options3d.enabled
- ); // #4280
- };
- Chart.prototype.propsRequireDirtyBox.push('chart.options3d');
- Chart.prototype.propsRequireUpdateSeries.push('chart.options3d');
- // Legacy support for HC < 6 to make 'scatter' series in a 3D chart route to the
- // real 'scatter3d' series type.
- addEvent(Chart, 'afterInit', function () {
- var options = this.options;
- if (this.is3d()) {
- (options.series || []).forEach(function (s) {
- var type = s.type ||
- options.chart.type ||
- options.chart.defaultSeriesType;
- if (type === 'scatter') {
- s.type = 'scatter3d';
- }
- });
- }
- });
- // And do it on dynamic add (#8407)
- addEvent(Chart, 'addSeries', function (e) {
- if (this.is3d()) {
- if (e.options.type === 'scatter') {
- e.options.type = 'scatter3d';
- }
- }
- });
- /**
- * Calculate scale of the 3D view. That is required to
- * fit chart's 3D projection into the actual plotting area. Reported as #4933.
- * @notice This function should ideally take the plot values instead of a chart
- * object, but since the chart object is needed for perspective it is
- * not practical. Possible to make both getScale and perspective more
- * logical and also immutable.
- *
- * @private
- * @function getScale
- *
- * @param {Highcharts.Chart} chart
- * Chart object
- *
- * @param {number} depth
- * The depth of the chart
- *
- * @return {number}
- * The scale to fit the 3D chart into the plotting area.
- */
- function getScale(chart, depth) {
- var plotLeft = chart.plotLeft,
- plotRight = chart.plotWidth + plotLeft,
- plotTop = chart.plotTop,
- plotBottom = chart.plotHeight + plotTop,
- originX = plotLeft + chart.plotWidth / 2,
- originY = plotTop + chart.plotHeight / 2,
- bbox3d = {
- minX: Number.MAX_VALUE,
- maxX: -Number.MAX_VALUE,
- minY: Number.MAX_VALUE,
- maxY: -Number.MAX_VALUE
- },
- corners,
- scale = 1;
- // Top left corners:
- corners = [{
- x: plotLeft,
- y: plotTop,
- z: 0
- }, {
- x: plotLeft,
- y: plotTop,
- z: depth
- }];
- // Top right corners:
- [0, 1].forEach(function (i) {
- corners.push({
- x: plotRight,
- y: corners[i].y,
- z: corners[i].z
- });
- });
- // All bottom corners:
- [0, 1, 2, 3].forEach(function (i) {
- corners.push({
- x: corners[i].x,
- y: plotBottom,
- z: corners[i].z
- });
- });
- // Calculate 3D corners:
- corners = perspective(corners, chart, false);
- // Get bounding box of 3D element:
- corners.forEach(function (corner) {
- bbox3d.minX = Math.min(bbox3d.minX, corner.x);
- bbox3d.maxX = Math.max(bbox3d.maxX, corner.x);
- bbox3d.minY = Math.min(bbox3d.minY, corner.y);
- bbox3d.maxY = Math.max(bbox3d.maxY, corner.y);
- });
- // Left edge:
- if (plotLeft > bbox3d.minX) {
- scale = Math.min(
- scale,
- 1 - Math.abs((plotLeft + originX) / (bbox3d.minX + originX)) % 1
- );
- }
- // Right edge:
- if (plotRight < bbox3d.maxX) {
- scale = Math.min(
- scale,
- (plotRight - originX) / (bbox3d.maxX - originX)
- );
- }
- // Top edge:
- if (plotTop > bbox3d.minY) {
- if (bbox3d.minY < 0) {
- scale = Math.min(
- scale,
- (plotTop + originY) / (-bbox3d.minY + plotTop + originY)
- );
- } else {
- scale = Math.min(
- scale,
- 1 - (plotTop + originY) / (bbox3d.minY + originY) % 1
- );
- }
- }
- // Bottom edge:
- if (plotBottom < bbox3d.maxY) {
- scale = Math.min(
- scale,
- Math.abs((plotBottom - originY) / (bbox3d.maxY - originY))
- );
- }
- return scale;
- }
- H.wrap(H.Chart.prototype, 'isInsidePlot', function (proceed) {
- return this.is3d() || proceed.apply(this, [].slice.call(arguments, 1));
- });
- var defaultOptions = H.getOptions();
- /**
- * @optionparent
- */
- var extendedOptions = {
- chart: {
- /**
- * Options to render charts in 3 dimensions. This feature requires
- * `highcharts-3d.js`, found in the download package or online at
- * [code.highcharts.com/highcharts-3d.js](http://code.highcharts.com/highcharts-3d.js).
- *
- * @since 4.0
- * @product highcharts
- */
- options3d: {
- /**
- * Wether to render the chart using the 3D functionality.
- *
- * @since 4.0
- * @product highcharts
- */
- enabled: false,
- /**
- * One of the two rotation angles for the chart.
- *
- * @since 4.0
- * @product highcharts
- */
- alpha: 0,
- /**
- * One of the two rotation angles for the chart.
- *
- * @since 4.0
- * @product highcharts
- */
- beta: 0,
- /**
- * The total depth of the chart.
- *
- * @since 4.0
- * @product highcharts
- */
- depth: 100,
- /**
- * Whether the 3d box should automatically adjust to the chart plot
- * area.
- *
- * @since 4.2.4
- * @product highcharts
- */
- fitToPlot: true,
- /**
- * Defines the distance the viewer is standing in front of the
- * chart, this setting is important to calculate the perspective
- * effect in column and scatter charts. It is not used for 3D pie
- * charts.
- *
- * @since 4.0
- * @product highcharts
- */
- viewDistance: 25,
- /**
- * Set it to `"auto"` to automatically move the labels to the best
- * edge.
- *
- * @type {"auto"|null}
- * @since 5.0.12
- * @product highcharts
- */
- axisLabelPosition: null,
- /**
- * Provides the option to draw a frame around the charts by defining
- * a bottom, front and back panel.
- *
- * @since 4.0
- * @product highcharts
- */
- frame: {
- /**
- * Whether the frames are visible.
- */
- visible: 'default',
- /**
- * General pixel thickness for the frame faces.
- */
- size: 1,
- /**
- * The bottom of the frame around a 3D chart.
- *
- * @since 4.0
- * @product highcharts
- */
- /**
- * The color of the panel.
- *
- * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
- * @default transparent
- * @since 4.0
- * @product highcharts
- * @apioption chart.options3d.frame.bottom.color
- */
- /**
- * The thickness of the panel.
- *
- * @type {number}
- * @default 1
- * @since 4.0
- * @product highcharts
- * @apioption chart.options3d.frame.bottom.size
- */
- /**
- * Whether to display the frame. Possible values are `true`,
- * `false`, `"auto"` to display only the frames behind the data,
- * and `"default"` to display faces behind the data based on the
- * axis layout, ignoring the point of view.
- *
- * @sample {highcharts} highcharts/3d/scatter-frame/
- * Auto frames
- *
- * @type {boolean|"default"|"auto"}
- * @default default
- * @since 5.0.12
- * @product highcharts
- * @apioption chart.options3d.frame.bottom.visible
- */
- /**
- * The bottom of the frame around a 3D chart.
- */
- bottom: {},
- /**
- * The top of the frame around a 3D chart.
- *
- * @extends chart.options3d.frame.bottom
- */
- top: {},
- /**
- * The left side of the frame around a 3D chart.
- *
- * @extends chart.options3d.frame.bottom
- */
- left: {},
- /**
- * The right of the frame around a 3D chart.
- *
- * @extends chart.options3d.frame.bottom
- */
- right: {},
- /**
- * The back side of the frame around a 3D chart.
- *
- * @extends chart.options3d.frame.bottom
- */
- back: {},
- /**
- * The front of the frame around a 3D chart.
- *
- * @extends chart.options3d.frame.bottom
- */
- front: {}
- }
- }
- }
- };
- merge(true, defaultOptions, extendedOptions);
- // Add the required CSS classes for column sides (#6018)
- addEvent(Chart, 'afterGetContainer', function () {
- if (this.styledMode) {
- this.renderer.definition({
- tagName: 'style',
- textContent:
- '.highcharts-3d-top{' +
- 'filter: url(#highcharts-brighter)' +
- '}\n' +
- '.highcharts-3d-side{' +
- 'filter: url(#highcharts-darker)' +
- '}\n'
- });
- // Add add definitions used by brighter and darker faces of the cuboids.
- [{
- name: 'darker',
- slope: 0.6
- }, {
- name: 'brighter',
- slope: 1.4
- }].forEach(function (cfg) {
- this.renderer.definition({
- tagName: 'filter',
- id: 'highcharts-' + cfg.name,
- children: [{
- tagName: 'feComponentTransfer',
- children: [{
- tagName: 'feFuncR',
- type: 'linear',
- slope: cfg.slope
- }, {
- tagName: 'feFuncG',
- type: 'linear',
- slope: cfg.slope
- }, {
- tagName: 'feFuncB',
- type: 'linear',
- slope: cfg.slope
- }]
- }]
- });
- }, this);
- }
- });
- wrap(Chart.prototype, 'setClassName', function (proceed) {
- proceed.apply(this, [].slice.call(arguments, 1));
- if (this.is3d()) {
- this.container.className += ' highcharts-3d-chart';
- }
- });
- addEvent(H.Chart, 'afterSetChartSize', function () {
- var chart = this,
- options3d = chart.options.chart.options3d;
- if (chart.is3d()) {
- var inverted = chart.inverted,
- clipBox = chart.clipBox,
- margin = chart.margin,
- x = inverted ? 'y' : 'x',
- y = inverted ? 'x' : 'y',
- w = inverted ? 'height' : 'width',
- h = inverted ? 'width' : 'height';
- clipBox[x] = -(margin[3] || 0);
- clipBox[y] = -(margin[0] || 0);
- clipBox[w] = chart.chartWidth + (margin[3] || 0) + (margin[1] || 0);
- clipBox[h] = chart.chartHeight + (margin[0] || 0) + (margin[2] || 0);
- // Set scale, used later in perspective method():
- // getScale uses perspective, so scale3d has to be reset.
- chart.scale3d = 1;
- if (options3d.fitToPlot === true) {
- chart.scale3d = getScale(chart, options3d.depth);
- }
- // Recalculate the 3d frame with every call of setChartSize,
- // instead of doing it after every redraw(). It avoids ticks
- // and axis title outside of chart.
- chart.frame3d = this.get3dFrame(); // #7942
- }
- });
- addEvent(Chart, 'beforeRedraw', function () {
- if (this.is3d()) {
- // Set to force a redraw of all elements
- this.isDirtyBox = true;
- }
- });
- addEvent(Chart, 'beforeRender', function () {
- if (this.is3d()) {
- this.frame3d = this.get3dFrame();
- }
- });
- // Draw the series in the reverse order (#3803, #3917)
- wrap(Chart.prototype, 'renderSeries', function (proceed) {
- var series,
- i = this.series.length;
- if (this.is3d()) {
- while (i--) {
- series = this.series[i];
- series.translate();
- series.render();
- }
- } else {
- proceed.call(this);
- }
- });
- addEvent(Chart, 'afterDrawChartBox', function () {
- if (this.is3d()) {
- var chart = this,
- renderer = chart.renderer,
- options3d = this.options.chart.options3d,
- frame = chart.get3dFrame(),
- xm = this.plotLeft,
- xp = this.plotLeft + this.plotWidth,
- ym = this.plotTop,
- yp = this.plotTop + this.plotHeight,
- zm = 0,
- zp = options3d.depth,
- xmm = xm - (frame.left.visible ? frame.left.size : 0),
- xpp = xp + (frame.right.visible ? frame.right.size : 0),
- ymm = ym - (frame.top.visible ? frame.top.size : 0),
- ypp = yp + (frame.bottom.visible ? frame.bottom.size : 0),
- zmm = zm - (frame.front.visible ? frame.front.size : 0),
- zpp = zp + (frame.back.visible ? frame.back.size : 0),
- verb = chart.hasRendered ? 'animate' : 'attr';
- this.frame3d = frame;
- if (!this.frameShapes) {
- this.frameShapes = {
- bottom: renderer.polyhedron().add(),
- top: renderer.polyhedron().add(),
- left: renderer.polyhedron().add(),
- right: renderer.polyhedron().add(),
- back: renderer.polyhedron().add(),
- front: renderer.polyhedron().add()
- };
- }
- this.frameShapes.bottom[verb]({
- 'class': 'highcharts-3d-frame highcharts-3d-frame-bottom',
- zIndex: frame.bottom.frontFacing ? -1000 : 1000,
- faces: [{ // bottom
- fill: H.color(frame.bottom.color).brighten(0.1).get(),
- vertexes: [{
- x: xmm,
- y: ypp,
- z: zmm
- }, {
- x: xpp,
- y: ypp,
- z: zmm
- }, {
- x: xpp,
- y: ypp,
- z: zpp
- }, {
- x: xmm,
- y: ypp,
- z: zpp
- }],
- enabled: frame.bottom.visible
- },
- { // top
- fill: H.color(frame.bottom.color).brighten(0.1).get(),
- vertexes: [{
- x: xm,
- y: yp,
- z: zp
- }, {
- x: xp,
- y: yp,
- z: zp
- }, {
- x: xp,
- y: yp,
- z: zm
- }, {
- x: xm,
- y: yp,
- z: zm
- }],
- enabled: frame.bottom.visible
- },
- { // left
- fill: H.color(frame.bottom.color).brighten(-0.1).get(),
- vertexes: [{
- x: xmm,
- y: ypp,
- z: zmm
- }, {
- x: xmm,
- y: ypp,
- z: zpp
- }, {
- x: xm,
- y: yp,
- z: zp
- }, {
- x: xm,
- y: yp,
- z: zm
- }],
- enabled: frame.bottom.visible && !frame.left.visible
- },
- { // right
- fill: H.color(frame.bottom.color).brighten(-0.1).get(),
- vertexes: [{
- x: xpp,
- y: ypp,
- z: zpp
- }, {
- x: xpp,
- y: ypp,
- z: zmm
- }, {
- x: xp,
- y: yp,
- z: zm
- }, {
- x: xp,
- y: yp,
- z: zp
- }],
- enabled: frame.bottom.visible && !frame.right.visible
- },
- { // front
- fill: H.color(frame.bottom.color).get(),
- vertexes: [{
- x: xpp,
- y: ypp,
- z: zmm
- }, {
- x: xmm,
- y: ypp,
- z: zmm
- }, {
- x: xm,
- y: yp,
- z: zm
- }, {
- x: xp,
- y: yp,
- z: zm
- }],
- enabled: frame.bottom.visible && !frame.front.visible
- },
- { // back
- fill: H.color(frame.bottom.color).get(),
- vertexes: [{
- x: xmm,
- y: ypp,
- z: zpp
- }, {
- x: xpp,
- y: ypp,
- z: zpp
- }, {
- x: xp,
- y: yp,
- z: zp
- }, {
- x: xm,
- y: yp,
- z: zp
- }],
- enabled: frame.bottom.visible && !frame.back.visible
- }]
- });
- this.frameShapes.top[verb]({
- 'class': 'highcharts-3d-frame highcharts-3d-frame-top',
- zIndex: frame.top.frontFacing ? -1000 : 1000,
- faces: [{ // bottom
- fill: H.color(frame.top.color).brighten(0.1).get(),
- vertexes: [{
- x: xmm,
- y: ymm,
- z: zpp
- }, {
- x: xpp,
- y: ymm,
- z: zpp
- }, {
- x: xpp,
- y: ymm,
- z: zmm
- }, {
- x: xmm,
- y: ymm,
- z: zmm
- }],
- enabled: frame.top.visible
- },
- { // top
- fill: H.color(frame.top.color).brighten(0.1).get(),
- vertexes: [{
- x: xm,
- y: ym,
- z: zm
- }, {
- x: xp,
- y: ym,
- z: zm
- }, {
- x: xp,
- y: ym,
- z: zp
- }, {
- x: xm,
- y: ym,
- z: zp
- }],
- enabled: frame.top.visible
- },
- { // left
- fill: H.color(frame.top.color).brighten(-0.1).get(),
- vertexes: [{
- x: xmm,
- y: ymm,
- z: zpp
- }, {
- x: xmm,
- y: ymm,
- z: zmm
- }, {
- x: xm,
- y: ym,
- z: zm
- }, {
- x: xm,
- y: ym,
- z: zp
- }],
- enabled: frame.top.visible && !frame.left.visible
- },
- { // right
- fill: H.color(frame.top.color).brighten(-0.1).get(),
- vertexes: [{
- x: xpp,
- y: ymm,
- z: zmm
- }, {
- x: xpp,
- y: ymm,
- z: zpp
- }, {
- x: xp,
- y: ym,
- z: zp
- }, {
- x: xp,
- y: ym,
- z: zm
- }],
- enabled: frame.top.visible && !frame.right.visible
- },
- { // front
- fill: H.color(frame.top.color).get(),
- vertexes: [{
- x: xmm,
- y: ymm,
- z: zmm
- }, {
- x: xpp,
- y: ymm,
- z: zmm
- }, {
- x: xp,
- y: ym,
- z: zm
- }, {
- x: xm,
- y: ym,
- z: zm
- }],
- enabled: frame.top.visible && !frame.front.visible
- },
- { // back
- fill: H.color(frame.top.color).get(),
- vertexes: [{
- x: xpp,
- y: ymm,
- z: zpp
- }, {
- x: xmm,
- y: ymm,
- z: zpp
- }, {
- x: xm,
- y: ym,
- z: zp
- }, {
- x: xp,
- y: ym,
- z: zp
- }],
- enabled: frame.top.visible && !frame.back.visible
- }]
- });
- this.frameShapes.left[verb]({
- 'class': 'highcharts-3d-frame highcharts-3d-frame-left',
- zIndex: frame.left.frontFacing ? -1000 : 1000,
- faces: [{ // bottom
- fill: H.color(frame.left.color).brighten(0.1).get(),
- vertexes: [{
- x: xmm,
- y: ypp,
- z: zmm
- }, {
- x: xm,
- y: yp,
- z: zm
- }, {
- x: xm,
- y: yp,
- z: zp
- }, {
- x: xmm,
- y: ypp,
- z: zpp
- }],
- enabled: frame.left.visible && !frame.bottom.visible
- },
- { // top
- fill: H.color(frame.left.color).brighten(0.1).get(),
- vertexes: [{
- x: xmm,
- y: ymm,
- z: zpp
- }, {
- x: xm,
- y: ym,
- z: zp
- }, {
- x: xm,
- y: ym,
- z: zm
- }, {
- x: xmm,
- y: ymm,
- z: zmm
- }],
- enabled: frame.left.visible && !frame.top.visible
- },
- { // left
- fill: H.color(frame.left.color).brighten(-0.1).get(),
- vertexes: [{
- x: xmm,
- y: ypp,
- z: zpp
- }, {
- x: xmm,
- y: ymm,
- z: zpp
- }, {
- x: xmm,
- y: ymm,
- z: zmm
- }, {
- x: xmm,
- y: ypp,
- z: zmm
- }],
- enabled: frame.left.visible
- },
- { // right
- fill: H.color(frame.left.color).brighten(-0.1).get(),
- vertexes: [{
- x: xm,
- y: ym,
- z: zp
- }, {
- x: xm,
- y: yp,
- z: zp
- }, {
- x: xm,
- y: yp,
- z: zm
- }, {
- x: xm,
- y: ym,
- z: zm
- }],
- enabled: frame.left.visible
- },
- { // front
- fill: H.color(frame.left.color).get(),
- vertexes: [{
- x: xmm,
- y: ypp,
- z: zmm
- }, {
- x: xmm,
- y: ymm,
- z: zmm
- }, {
- x: xm,
- y: ym,
- z: zm
- }, {
- x: xm,
- y: yp,
- z: zm
- }],
- enabled: frame.left.visible && !frame.front.visible
- },
- { // back
- fill: H.color(frame.left.color).get(),
- vertexes: [{
- x: xmm,
- y: ymm,
- z: zpp
- }, {
- x: xmm,
- y: ypp,
- z: zpp
- }, {
- x: xm,
- y: yp,
- z: zp
- }, {
- x: xm,
- y: ym,
- z: zp
- }],
- enabled: frame.left.visible && !frame.back.visible
- }]
- });
- this.frameShapes.right[verb]({
- 'class': 'highcharts-3d-frame highcharts-3d-frame-right',
- zIndex: frame.right.frontFacing ? -1000 : 1000,
- faces: [{ // bottom
- fill: H.color(frame.right.color).brighten(0.1).get(),
- vertexes: [{
- x: xpp,
- y: ypp,
- z: zpp
- }, {
- x: xp,
- y: yp,
- z: zp
- }, {
- x: xp,
- y: yp,
- z: zm
- }, {
- x: xpp,
- y: ypp,
- z: zmm
- }],
- enabled: frame.right.visible && !frame.bottom.visible
- },
- { // top
- fill: H.color(frame.right.color).brighten(0.1).get(),
- vertexes: [{
- x: xpp,
- y: ymm,
- z: zmm
- }, {
- x: xp,
- y: ym,
- z: zm
- }, {
- x: xp,
- y: ym,
- z: zp
- }, {
- x: xpp,
- y: ymm,
- z: zpp
- }],
- enabled: frame.right.visible && !frame.top.visible
- },
- { // left
- fill: H.color(frame.right.color).brighten(-0.1).get(),
- vertexes: [{
- x: xp,
- y: ym,
- z: zm
- }, {
- x: xp,
- y: yp,
- z: zm
- }, {
- x: xp,
- y: yp,
- z: zp
- }, {
- x: xp,
- y: ym,
- z: zp
- }],
- enabled: frame.right.visible
- },
- { // right
- fill: H.color(frame.right.color).brighten(-0.1).get(),
- vertexes: [{
- x: xpp,
- y: ypp,
- z: zmm
- }, {
- x: xpp,
- y: ymm,
- z: zmm
- }, {
- x: xpp,
- y: ymm,
- z: zpp
- }, {
- x: xpp,
- y: ypp,
- z: zpp
- }],
- enabled: frame.right.visible
- },
- { // front
- fill: H.color(frame.right.color).get(),
- vertexes: [{
- x: xpp,
- y: ymm,
- z: zmm
- }, {
- x: xpp,
- y: ypp,
- z: zmm
- }, {
- x: xp,
- y: yp,
- z: zm
- }, {
- x: xp,
- y: ym,
- z: zm
- }],
- enabled: frame.right.visible && !frame.front.visible
- },
- { // back
- fill: H.color(frame.right.color).get(),
- vertexes: [{
- x: xpp,
- y: ypp,
- z: zpp
- }, {
- x: xpp,
- y: ymm,
- z: zpp
- }, {
- x: xp,
- y: ym,
- z: zp
- }, {
- x: xp,
- y: yp,
- z: zp
- }],
- enabled: frame.right.visible && !frame.back.visible
- }]
- });
- this.frameShapes.back[verb]({
- 'class': 'highcharts-3d-frame highcharts-3d-frame-back',
- zIndex: frame.back.frontFacing ? -1000 : 1000,
- faces: [{ // bottom
- fill: H.color(frame.back.color).brighten(0.1).get(),
- vertexes: [{
- x: xpp,
- y: ypp,
- z: zpp
- }, {
- x: xmm,
- y: ypp,
- z: zpp
- }, {
- x: xm,
- y: yp,
- z: zp
- }, {
- x: xp,
- y: yp,
- z: zp
- }],
- enabled: frame.back.visible && !frame.bottom.visible
- },
- { // top
- fill: H.color(frame.back.color).brighten(0.1).get(),
- vertexes: [{
- x: xmm,
- y: ymm,
- z: zpp
- }, {
- x: xpp,
- y: ymm,
- z: zpp
- }, {
- x: xp,
- y: ym,
- z: zp
- }, {
- x: xm,
- y: ym,
- z: zp
- }],
- enabled: frame.back.visible && !frame.top.visible
- },
- { // left
- fill: H.color(frame.back.color).brighten(-0.1).get(),
- vertexes: [{
- x: xmm,
- y: ypp,
- z: zpp
- }, {
- x: xmm,
- y: ymm,
- z: zpp
- }, {
- x: xm,
- y: ym,
- z: zp
- }, {
- x: xm,
- y: yp,
- z: zp
- }],
- enabled: frame.back.visible && !frame.left.visible
- },
- { // right
- fill: H.color(frame.back.color).brighten(-0.1).get(),
- vertexes: [{
- x: xpp,
- y: ymm,
- z: zpp
- }, {
- x: xpp,
- y: ypp,
- z: zpp
- }, {
- x: xp,
- y: yp,
- z: zp
- }, {
- x: xp,
- y: ym,
- z: zp
- }],
- enabled: frame.back.visible && !frame.right.visible
- },
- { // front
- fill: H.color(frame.back.color).get(),
- vertexes: [{
- x: xm,
- y: ym,
- z: zp
- }, {
- x: xp,
- y: ym,
- z: zp
- }, {
- x: xp,
- y: yp,
- z: zp
- }, {
- x: xm,
- y: yp,
- z: zp
- }],
- enabled: frame.back.visible
- },
- { // back
- fill: H.color(frame.back.color).get(),
- vertexes: [{
- x: xmm,
- y: ypp,
- z: zpp
- }, {
- x: xpp,
- y: ypp,
- z: zpp
- }, {
- x: xpp,
- y: ymm,
- z: zpp
- }, {
- x: xmm,
- y: ymm,
- z: zpp
- }],
- enabled: frame.back.visible
- }]
- });
- this.frameShapes.front[verb]({
- 'class': 'highcharts-3d-frame highcharts-3d-frame-front',
- zIndex: frame.front.frontFacing ? -1000 : 1000,
- faces: [{ // bottom
- fill: H.color(frame.front.color).brighten(0.1).get(),
- vertexes: [{
- x: xmm,
- y: ypp,
- z: zmm
- }, {
- x: xpp,
- y: ypp,
- z: zmm
- }, {
- x: xp,
- y: yp,
- z: zm
- }, {
- x: xm,
- y: yp,
- z: zm
- }],
- enabled: frame.front.visible && !frame.bottom.visible
- },
- { // top
- fill: H.color(frame.front.color).brighten(0.1).get(),
- vertexes: [{
- x: xpp,
- y: ymm,
- z: zmm
- }, {
- x: xmm,
- y: ymm,
- z: zmm
- }, {
- x: xm,
- y: ym,
- z: zm
- }, {
- x: xp,
- y: ym,
- z: zm
- }],
- enabled: frame.front.visible && !frame.top.visible
- },
- { // left
- fill: H.color(frame.front.color).brighten(-0.1).get(),
- vertexes: [{
- x: xmm,
- y: ymm,
- z: zmm
- }, {
- x: xmm,
- y: ypp,
- z: zmm
- }, {
- x: xm,
- y: yp,
- z: zm
- }, {
- x: xm,
- y: ym,
- z: zm
- }],
- enabled: frame.front.visible && !frame.left.visible
- },
- { // right
- fill: H.color(frame.front.color).brighten(-0.1).get(),
- vertexes: [{
- x: xpp,
- y: ypp,
- z: zmm
- }, {
- x: xpp,
- y: ymm,
- z: zmm
- }, {
- x: xp,
- y: ym,
- z: zm
- }, {
- x: xp,
- y: yp,
- z: zm
- }],
- enabled: frame.front.visible && !frame.right.visible
- },
- { // front
- fill: H.color(frame.front.color).get(),
- vertexes: [{
- x: xp,
- y: ym,
- z: zm
- }, {
- x: xm,
- y: ym,
- z: zm
- }, {
- x: xm,
- y: yp,
- z: zm
- }, {
- x: xp,
- y: yp,
- z: zm
- }],
- enabled: frame.front.visible
- },
- { // back
- fill: H.color(frame.front.color).get(),
- vertexes: [{
- x: xpp,
- y: ypp,
- z: zmm
- }, {
- x: xmm,
- y: ypp,
- z: zmm
- }, {
- x: xmm,
- y: ymm,
- z: zmm
- }, {
- x: xpp,
- y: ymm,
- z: zmm
- }],
- enabled: frame.front.visible
- }]
- });
- }
- });
- Chart.prototype.retrieveStacks = function (stacking) {
- var series = this.series,
- stacks = {},
- stackNumber,
- i = 1;
- this.series.forEach(function (s) {
- stackNumber = pick(
- s.options.stack,
- (stacking ? 0 : series.length - 1 - s.index)
- ); // #3841, #4532
- if (!stacks[stackNumber]) {
- stacks[stackNumber] = { series: [s], position: i };
- i++;
- } else {
- stacks[stackNumber].series.push(s);
- }
- });
- stacks.totalStacks = i + 1;
- return stacks;
- };
- Chart.prototype.get3dFrame = function () {
- var chart = this,
- options3d = chart.options.chart.options3d,
- frameOptions = options3d.frame,
- xm = chart.plotLeft,
- xp = chart.plotLeft + chart.plotWidth,
- ym = chart.plotTop,
- yp = chart.plotTop + chart.plotHeight,
- zm = 0,
- zp = options3d.depth,
- faceOrientation = function (vertexes) {
- var area = H.shapeArea3d(vertexes, chart);
- // Give it 0.5 squared-pixel as a margin for rounding errors.
- if (area > 0.5) {
- return 1;
- }
- if (area < -0.5) {
- return -1;
- }
- return 0;
- },
- bottomOrientation = faceOrientation([
- { x: xm, y: yp, z: zp },
- { x: xp, y: yp, z: zp },
- { x: xp, y: yp, z: zm },
- { x: xm, y: yp, z: zm }
- ]),
- topOrientation = faceOrientation([
- { x: xm, y: ym, z: zm },
- { x: xp, y: ym, z: zm },
- { x: xp, y: ym, z: zp },
- { x: xm, y: ym, z: zp }
- ]),
- leftOrientation = faceOrientation([
- { x: xm, y: ym, z: zm },
- { x: xm, y: ym, z: zp },
- { x: xm, y: yp, z: zp },
- { x: xm, y: yp, z: zm }
- ]),
- rightOrientation = faceOrientation([
- { x: xp, y: ym, z: zp },
- { x: xp, y: ym, z: zm },
- { x: xp, y: yp, z: zm },
- { x: xp, y: yp, z: zp }
- ]),
- frontOrientation = faceOrientation([
- { x: xm, y: yp, z: zm },
- { x: xp, y: yp, z: zm },
- { x: xp, y: ym, z: zm },
- { x: xm, y: ym, z: zm }
- ]),
- backOrientation = faceOrientation([
- { x: xm, y: ym, z: zp },
- { x: xp, y: ym, z: zp },
- { x: xp, y: yp, z: zp },
- { x: xm, y: yp, z: zp }
- ]),
- defaultShowBottom = false,
- defaultShowTop = false,
- defaultShowLeft = false,
- defaultShowRight = false,
- defaultShowFront = false,
- defaultShowBack = true;
- // The 'default' criteria to visible faces of the frame is looking up every
- // axis to decide whenever the left/right//top/bottom sides of the frame
- // will be shown
- [].concat(chart.xAxis, chart.yAxis, chart.zAxis).forEach(function (axis) {
- if (axis) {
- if (axis.horiz) {
- if (axis.opposite) {
- defaultShowTop = true;
- } else {
- defaultShowBottom = true;
- }
- } else {
- if (axis.opposite) {
- defaultShowRight = true;
- } else {
- defaultShowLeft = true;
- }
- }
- }
- });
- var getFaceOptions = function (sources, faceOrientation, defaultVisible) {
- var faceAttrs = ['size', 'color', 'visible'];
- var options = {};
- for (var i = 0; i < faceAttrs.length; i++) {
- var attr = faceAttrs[i];
- for (var j = 0; j < sources.length; j++) {
- if (typeof sources[j] === 'object') {
- var val = sources[j][attr];
- if (val !== undefined && val !== null) {
- options[attr] = val;
- break;
- }
- }
- }
- }
- var isVisible = defaultVisible;
- if (options.visible === true || options.visible === false) {
- isVisible = options.visible;
- } else if (options.visible === 'auto') {
- isVisible = faceOrientation > 0;
- }
- return {
- size: pick(options.size, 1),
- color: pick(options.color, 'none'),
- frontFacing: faceOrientation > 0,
- visible: isVisible
- };
- };
- // docs @TODO: Add all frame options (left, right, top, bottom, front, back)
- // to apioptions JSDoc once the new system is up.
- var ret = {
- // FIXME: Previously, left/right, top/bottom and front/back pairs shared
- // size and color.
- // For compatibility and consistency sake, when one face have
- // size/color/visibility set, the opposite face will default to the same
- // values. Also, left/right used to be called 'side', so that's also
- // added as a fallback
- bottom: getFaceOptions(
- [frameOptions.bottom, frameOptions.top, frameOptions],
- bottomOrientation,
- defaultShowBottom
- ),
- top: getFaceOptions(
- [frameOptions.top, frameOptions.bottom, frameOptions],
- topOrientation,
- defaultShowTop
- ),
- left: getFaceOptions(
- [
- frameOptions.left,
- frameOptions.right,
- frameOptions.side,
- frameOptions
- ],
- leftOrientation,
- defaultShowLeft
- ),
- right: getFaceOptions(
- [
- frameOptions.right,
- frameOptions.left,
- frameOptions.side,
- frameOptions
- ],
- rightOrientation,
- defaultShowRight
- ),
- back: getFaceOptions(
- [frameOptions.back, frameOptions.front, frameOptions],
- backOrientation,
- defaultShowBack
- ),
- front: getFaceOptions(
- [frameOptions.front, frameOptions.back, frameOptions],
- frontOrientation,
- defaultShowFront
- )
- };
- // Decide the bast place to put axis title/labels based on the visible
- // faces. Ideally, The labels can only be on the edge between a visible face
- // and an invisble one. Also, the Y label should be one the left-most edge
- // (right-most if opposite),
- if (options3d.axisLabelPosition === 'auto') {
- var isValidEdge = function (face1, face2) {
- return (
- (face1.visible !== face2.visible) ||
- (
- face1.visible &&
- face2.visible &&
- (face1.frontFacing !== face2.frontFacing)
- )
- );
- };
- var yEdges = [];
- if (isValidEdge(ret.left, ret.front)) {
- yEdges.push({
- y: (ym + yp) / 2,
- x: xm,
- z: zm,
- xDir: { x: 1, y: 0, z: 0 }
- });
- }
- if (isValidEdge(ret.left, ret.back)) {
- yEdges.push({
- y: (ym + yp) / 2,
- x: xm,
- z: zp,
- xDir: { x: 0, y: 0, z: -1 }
- });
- }
- if (isValidEdge(ret.right, ret.front)) {
- yEdges.push({
- y: (ym + yp) / 2,
- x: xp,
- z: zm,
- xDir: { x: 0, y: 0, z: 1 }
- });
- }
- if (isValidEdge(ret.right, ret.back)) {
- yEdges.push({
- y: (ym + yp) / 2,
- x: xp,
- z: zp,
- xDir: { x: -1, y: 0, z: 0 }
- });
- }
- var xBottomEdges = [];
- if (isValidEdge(ret.bottom, ret.front)) {
- xBottomEdges.push({
- x: (xm + xp) / 2,
- y: yp,
- z: zm,
- xDir: { x: 1, y: 0, z: 0 }
- });
- }
- if (isValidEdge(ret.bottom, ret.back)) {
- xBottomEdges.push({
- x: (xm + xp) / 2,
- y: yp,
- z: zp,
- xDir: { x: -1, y: 0, z: 0 }
- });
- }
- var xTopEdges = [];
- if (isValidEdge(ret.top, ret.front)) {
- xTopEdges.push({
- x: (xm + xp) / 2,
- y: ym,
- z: zm,
- xDir: { x: 1, y: 0, z: 0 }
- });
- }
- if (isValidEdge(ret.top, ret.back)) {
- xTopEdges.push({
- x: (xm + xp) / 2,
- y: ym,
- z: zp,
- xDir: { x: -1, y: 0, z: 0 }
- });
- }
- var zBottomEdges = [];
- if (isValidEdge(ret.bottom, ret.left)) {
- zBottomEdges.push({
- z: (zm + zp) / 2,
- y: yp,
- x: xm,
- xDir: { x: 0, y: 0, z: -1 }
- });
- }
- if (isValidEdge(ret.bottom, ret.right)) {
- zBottomEdges.push({
- z: (zm + zp) / 2,
- y: yp,
- x: xp,
- xDir: { x: 0, y: 0, z: 1 }
- });
- }
- var zTopEdges = [];
- if (isValidEdge(ret.top, ret.left)) {
- zTopEdges.push({
- z: (zm + zp) / 2,
- y: ym,
- x: xm,
- xDir: { x: 0, y: 0, z: -1 }
- });
- }
- if (isValidEdge(ret.top, ret.right)) {
- zTopEdges.push({
- z: (zm + zp) / 2,
- y: ym,
- x: xp,
- xDir: { x: 0, y: 0, z: 1 }
- });
- }
- var pickEdge = function (edges, axis, mult) {
- if (edges.length === 0) {
- return null;
- }
- if (edges.length === 1) {
- return edges[0];
- }
- var best = 0,
- projections = perspective(edges, chart, false);
- for (var i = 1; i < projections.length; i++) {
- if (
- mult * projections[i][axis] >
- mult * projections[best][axis]
- ) {
- best = i;
- } else if (
- (
- mult * projections[i][axis] ===
- mult * projections[best][axis]
- ) &&
- (projections[i].z < projections[best].z)
- ) {
- best = i;
- }
- }
- return edges[best];
- };
- ret.axes = {
- y: {
- 'left': pickEdge(yEdges, 'x', -1),
- 'right': pickEdge(yEdges, 'x', +1)
- },
- x: {
- 'top': pickEdge(xTopEdges, 'y', -1),
- 'bottom': pickEdge(xBottomEdges, 'y', +1)
- },
- z: {
- 'top': pickEdge(zTopEdges, 'y', -1),
- 'bottom': pickEdge(zBottomEdges, 'y', +1)
- }
- };
- } else {
- ret.axes = {
- y: {
- 'left': { x: xm, z: zm, xDir: { x: 1, y: 0, z: 0 } },
- 'right': { x: xp, z: zm, xDir: { x: 0, y: 0, z: 1 } }
- },
- x: {
- 'top': { y: ym, z: zm, xDir: { x: 1, y: 0, z: 0 } },
- 'bottom': { y: yp, z: zm, xDir: { x: 1, y: 0, z: 0 } }
- },
- z: {
- 'top': {
- x: defaultShowLeft ? xp : xm,
- y: ym,
- xDir: defaultShowLeft ?
- { x: 0, y: 0, z: 1 } :
- { x: 0, y: 0, z: -1 }
- },
- 'bottom': {
- x: defaultShowLeft ? xp : xm,
- y: yp,
- xDir: defaultShowLeft ?
- { x: 0, y: 0, z: 1 } :
- { x: 0, y: 0, z: -1 }
- }
- }
- };
- }
- return ret;
- };
- // Animation setter for matrix property.
- H.Fx.prototype.matrixSetter = function () {
- var interpolated;
- if (this.pos < 1 &&
- (H.isArray(this.start) || H.isArray(this.end))) {
- var start = this.start || [1, 0, 0, 1, 0, 0];
- var end = this.end || [1, 0, 0, 1, 0, 0];
- interpolated = [];
- for (var i = 0; i < 6; i++) {
- interpolated.push(this.pos * end[i] + (1 - this.pos) * start[i]);
- }
- } else {
- interpolated = this.end;
- }
- this.elem.attr(
- this.prop,
- interpolated,
- null,
- true
- );
- };
- /**
- * Note: As of v5.0.12, `frame.left` or `frame.right` should be used instead.
- *
- * The side for the frame around a 3D chart.
- *
- * @deprecated
- * @since 4.0
- * @product highcharts
- * @apioption chart.options3d.frame.side
- */
- /**
- * The color of the panel.
- *
- * @deprecated
- * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
- * @default transparent
- * @since 4.0
- * @product highcharts
- * @apioption chart.options3d.frame.side.color
- */
- /**
- * The thickness of the panel.
- *
- * @deprecated
- * @type {number}
- * @default 1
- * @since 4.0
- * @product highcharts
- * @apioption chart.options3d.frame.side.size
- */
- }(Highcharts));
- (function (H) {
- /* *
- * (c) 2010-2019 Torstein Honsi
- *
- * Extenstion for 3d axes
- *
- * License: www.highcharts.com/license
- */
- var ZAxis,
- addEvent = H.addEvent,
- Axis = H.Axis,
- Chart = H.Chart,
- deg2rad = H.deg2rad,
- extend = H.extend,
- merge = H.merge,
- perspective = H.perspective,
- perspective3D = H.perspective3D,
- pick = H.pick,
- shapeArea = H.shapeArea,
- splat = H.splat,
- Tick = H.Tick,
- wrap = H.wrap;
- /**
- * @optionparent xAxis
- */
- var extendedOptions = {
- labels: {
- /**
- * Defines how the labels are be repositioned according to the 3D chart
- * orientation.
- *
- * - `'offset'`: Maintain a fixed horizontal/vertical distance from the
- * tick marks, despite the chart orientation. This is the backwards
- * compatible behavior, and causes skewing of X and Z axes.
- *
- * - `'chart'`: Preserve 3D position relative to the chart.
- * This looks nice, but hard to read if the text isn't
- * forward-facing.
- *
- * - `'flap'`: Rotated text along the axis to compensate for the chart
- * orientation. This tries to maintain text as legible as possible
- * on all orientations.
- *
- * - `'ortho'`: Rotated text along the axis direction so that the labels
- * are orthogonal to the axis. This is very similar to `'flap'`,
- * but prevents skewing the labels (X and Y scaling are still
- * present).
- *
- * @sample highcharts/3d/skewed-labels/
- * Skewed labels
- *
- * @since 5.0.15
- * @validvalue ['offset', 'chart', 'flap', 'ortho']
- * @product highcharts
- */
- position3d: 'offset',
- /**
- * If enabled, the axis labels will skewed to follow the perspective.
- *
- * This will fix overlapping labels and titles, but texts become less
- * legible due to the distortion.
- *
- * The final appearance depends heavily on `labels.position3d`.
- *
- * @sample highcharts/3d/skewed-labels/
- * Skewed labels
- *
- * @since 5.0.15
- * @product highcharts
- */
- skew3d: false
- },
- title: {
- /**
- * Defines how the title is repositioned according to the 3D chart
- * orientation.
- *
- * - `'offset'`: Maintain a fixed horizontal/vertical distance from the
- * tick marks, despite the chart orientation. This is the backwards
- * compatible behavior, and causes skewing of X and Z axes.
- *
- * - `'chart'`: Preserve 3D position relative to the chart.
- * This looks nice, but hard to read if the text isn't
- * forward-facing.
- *
- * - `'flap'`: Rotated text along the axis to compensate for the chart
- * orientation. This tries to maintain text as legible as possible on
- * all orientations.
- *
- * - `'ortho'`: Rotated text along the axis direction so that the labels
- * are orthogonal to the axis. This is very similar to `'flap'`, but
- * prevents skewing the labels (X and Y scaling are still present).
- *
- * - `undefined`: Will use the config from `labels.position3d`
- *
- * @sample highcharts/3d/skewed-labels/
- * Skewed labels
- *
- * @type {"offset"|"chart"|"flap"|"ortho"|null}
- * @since 5.0.15
- * @product highcharts
- */
- position3d: null,
- /**
- * If enabled, the axis title will skewed to follow the perspective.
- *
- * This will fix overlapping labels and titles, but texts become less
- * legible due to the distortion.
- *
- * The final appearance depends heavily on `title.position3d`.
- *
- * A `null` value will use the config from `labels.skew3d`.
- *
- * @sample highcharts/3d/skewed-labels/
- * Skewed labels
- *
- * @type {boolean|null}
- * @since 5.0.15
- * @product highcharts
- */
- skew3d: null
- }
- };
- merge(true, Axis.prototype.defaultOptions, extendedOptions);
- addEvent(Axis, 'afterSetOptions', function () {
- var options;
- if (this.chart.is3d && this.chart.is3d() && this.coll !== 'colorAxis') {
- options = this.options;
- options.tickWidth = pick(options.tickWidth, 0);
- options.gridLineWidth = pick(options.gridLineWidth, 1);
- }
- });
- wrap(Axis.prototype, 'getPlotLinePath', function (proceed) {
- var path = proceed.apply(this, [].slice.call(arguments, 1));
- // Do not do this if the chart is not 3D
- if (!this.chart.is3d() || this.coll === 'colorAxis') {
- return path;
- }
- if (path === null) {
- return path;
- }
- var chart = this.chart,
- options3d = chart.options.chart.options3d,
- d = this.isZAxis ? chart.plotWidth : options3d.depth,
- frame = chart.frame3d;
- var pArr = [
- this.swapZ({ x: path[1], y: path[2], z: 0 }),
- this.swapZ({ x: path[1], y: path[2], z: d }),
- this.swapZ({ x: path[4], y: path[5], z: 0 }),
- this.swapZ({ x: path[4], y: path[5], z: d })
- ];
- var pathSegments = [];
- if (!this.horiz) { // Y-Axis
- if (frame.front.visible) {
- pathSegments.push(pArr[0], pArr[2]);
- }
- if (frame.back.visible) {
- pathSegments.push(pArr[1], pArr[3]);
- }
- if (frame.left.visible) {
- pathSegments.push(pArr[0], pArr[1]);
- }
- if (frame.right.visible) {
- pathSegments.push(pArr[2], pArr[3]);
- }
- } else if (this.isZAxis) { // Z-Axis
- if (frame.left.visible) {
- pathSegments.push(pArr[0], pArr[2]);
- }
- if (frame.right.visible) {
- pathSegments.push(pArr[1], pArr[3]);
- }
- if (frame.top.visible) {
- pathSegments.push(pArr[0], pArr[1]);
- }
- if (frame.bottom.visible) {
- pathSegments.push(pArr[2], pArr[3]);
- }
- } else { // X-Axis
- if (frame.front.visible) {
- pathSegments.push(pArr[0], pArr[2]);
- }
- if (frame.back.visible) {
- pathSegments.push(pArr[1], pArr[3]);
- }
- if (frame.top.visible) {
- pathSegments.push(pArr[0], pArr[1]);
- }
- if (frame.bottom.visible) {
- pathSegments.push(pArr[2], pArr[3]);
- }
- }
- pathSegments = perspective(pathSegments, this.chart, false);
- return this.chart.renderer.toLineSegments(pathSegments);
- });
- // Do not draw axislines in 3D
- wrap(Axis.prototype, 'getLinePath', function (proceed) {
- // Do not do this if the chart is not 3D
- if (!this.chart.is3d() || this.coll === 'colorAxis') {
- return proceed.apply(this, [].slice.call(arguments, 1));
- }
- return [];
- });
- wrap(Axis.prototype, 'getPlotBandPath', function (proceed) {
- // Do not do this if the chart is not 3D
- if (!this.chart.is3d() || this.coll === 'colorAxis') {
- return proceed.apply(this, [].slice.call(arguments, 1));
- }
- var args = arguments,
- from = args[1],
- to = args[2],
- path = [],
- fromPath = this.getPlotLinePath(from),
- toPath = this.getPlotLinePath(to);
- if (fromPath && toPath) {
- for (var i = 0; i < fromPath.length; i += 6) {
- path.push(
- 'M', fromPath[i + 1], fromPath[i + 2],
- 'L', fromPath[i + 4], fromPath[i + 5],
- 'L', toPath[i + 4], toPath[i + 5],
- 'L', toPath[i + 1], toPath[i + 2],
- 'Z'
- );
- }
- }
- return path;
- });
- function fix3dPosition(axis, pos, isTitle) {
- // Do not do this if the chart is not 3D
- if (!axis.chart.is3d() || axis.coll === 'colorAxis') {
- return pos;
- }
- var chart = axis.chart,
- alpha = deg2rad * chart.options.chart.options3d.alpha,
- beta = deg2rad * chart.options.chart.options3d.beta,
- positionMode = pick(
- isTitle && axis.options.title.position3d,
- axis.options.labels.position3d
- ),
- skew = pick(
- isTitle && axis.options.title.skew3d,
- axis.options.labels.skew3d
- ),
- frame = chart.frame3d,
- plotLeft = chart.plotLeft,
- plotRight = chart.plotWidth + plotLeft,
- plotTop = chart.plotTop,
- plotBottom = chart.plotHeight + plotTop,
- // Indicates we are labelling an X or Z axis on the "back" of the chart
- reverseFlap = false,
- offsetX = 0,
- offsetY = 0,
- vecX,
- vecY = { x: 0, y: 1, z: 0 };
- pos = axis.swapZ({ x: pos.x, y: pos.y, z: 0 });
- if (axis.isZAxis) { // Z Axis
- if (axis.opposite) {
- if (frame.axes.z.top === null) {
- return {};
- }
- offsetY = pos.y - plotTop;
- pos.x = frame.axes.z.top.x;
- pos.y = frame.axes.z.top.y;
- vecX = frame.axes.z.top.xDir;
- reverseFlap = !frame.top.frontFacing;
- } else {
- if (frame.axes.z.bottom === null) {
- return {};
- }
- offsetY = pos.y - plotBottom;
- pos.x = frame.axes.z.bottom.x;
- pos.y = frame.axes.z.bottom.y;
- vecX = frame.axes.z.bottom.xDir;
- reverseFlap = !frame.bottom.frontFacing;
- }
- } else if (axis.horiz) { // X Axis
- if (axis.opposite) {
- if (frame.axes.x.top === null) {
- return {};
- }
- offsetY = pos.y - plotTop;
- pos.y = frame.axes.x.top.y;
- pos.z = frame.axes.x.top.z;
- vecX = frame.axes.x.top.xDir;
- reverseFlap = !frame.top.frontFacing;
- } else {
- if (frame.axes.x.bottom === null) {
- return {};
- }
- offsetY = pos.y - plotBottom;
- pos.y = frame.axes.x.bottom.y;
- pos.z = frame.axes.x.bottom.z;
- vecX = frame.axes.x.bottom.xDir;
- reverseFlap = !frame.bottom.frontFacing;
- }
- } else { // Y Axis
- if (axis.opposite) {
- if (frame.axes.y.right === null) {
- return {};
- }
- offsetX = pos.x - plotRight;
- pos.x = frame.axes.y.right.x;
- pos.z = frame.axes.y.right.z;
- vecX = frame.axes.y.right.xDir;
- // Rotate 90º on opposite edge
- vecX = { x: vecX.z, y: vecX.y, z: -vecX.x };
- } else {
- if (frame.axes.y.left === null) {
- return {};
- }
- offsetX = pos.x - plotLeft;
- pos.x = frame.axes.y.left.x;
- pos.z = frame.axes.y.left.z;
- vecX = frame.axes.y.left.xDir;
- }
- }
- if (positionMode === 'chart') {
- // Labels preserve their direction relative to the chart
- // nothing to do
- } else if (positionMode === 'flap') {
- // Labels are be rotated around the axis direction to face the screen
- if (!axis.horiz) { // Y Axis
- vecX = { x: Math.cos(beta), y: 0, z: Math.sin(beta) };
- } else { // X and Z Axis
- var sin = Math.sin(alpha);
- var cos = Math.cos(alpha);
- if (axis.opposite) {
- sin = -sin;
- }
- if (reverseFlap) {
- sin = -sin;
- }
- vecY = { x: vecX.z * sin, y: cos, z: -vecX.x * sin };
- }
- } else if (positionMode === 'ortho') {
- // Labels will be rotated to be ortogonal to the axis
- if (!axis.horiz) { // Y Axis
- vecX = { x: Math.cos(beta), y: 0, z: Math.sin(beta) };
- } else { // X and Z Axis
- var sina = Math.sin(alpha);
- var cosa = Math.cos(alpha);
- var sinb = Math.sin(beta);
- var cosb = Math.cos(beta);
- var vecZ = { x: sinb * cosa, y: -sina, z: -cosa * cosb };
- vecY = {
- x: vecX.y * vecZ.z - vecX.z * vecZ.y,
- y: vecX.z * vecZ.x - vecX.x * vecZ.z,
- z: vecX.x * vecZ.y - vecX.y * vecZ.x
- };
- var scale = 1 / Math.sqrt(
- vecY.x * vecY.x + vecY.y * vecY.y + vecY.z * vecY.z
- );
- if (reverseFlap) {
- scale = -scale;
- }
- vecY = { x: scale * vecY.x, y: scale * vecY.y, z: scale * vecY.z };
- }
- } else { // positionMode == 'offset'
- // Labels will be skewd to maintain vertical / horizontal offsets from
- // axis
- if (!axis.horiz) { // Y Axis
- vecX = { x: Math.cos(beta), y: 0, z: Math.sin(beta) };
- } else { // X and Z Axis
- vecY = {
- x: Math.sin(beta) * Math.sin(alpha),
- y: Math.cos(alpha),
- z: -Math.cos(beta) * Math.sin(alpha)
- };
- }
- }
- pos.x += offsetX * vecX.x + offsetY * vecY.x;
- pos.y += offsetX * vecX.y + offsetY * vecY.y;
- pos.z += offsetX * vecX.z + offsetY * vecY.z;
- var projected = perspective([pos], axis.chart)[0];
- if (skew) {
- // Check if the label text would be mirrored
- var isMirrored = shapeArea(perspective([
- pos,
- { x: pos.x + vecX.x, y: pos.y + vecX.y, z: pos.z + vecX.z },
- { x: pos.x + vecY.x, y: pos.y + vecY.y, z: pos.z + vecY.z }
- ], axis.chart)) < 0;
- if (isMirrored) {
- vecX = { x: -vecX.x, y: -vecX.y, z: -vecX.z };
- }
- var pointsProjected = perspective([
- { x: pos.x, y: pos.y, z: pos.z },
- { x: pos.x + vecX.x, y: pos.y + vecX.y, z: pos.z + vecX.z },
- { x: pos.x + vecY.x, y: pos.y + vecY.y, z: pos.z + vecY.z }
- ], axis.chart);
- projected.matrix = [
- pointsProjected[1].x - pointsProjected[0].x,
- pointsProjected[1].y - pointsProjected[0].y,
- pointsProjected[2].x - pointsProjected[0].x,
- pointsProjected[2].y - pointsProjected[0].y,
- projected.x,
- projected.y
- ];
- projected.matrix[4] -= projected.x * projected.matrix[0] +
- projected.y * projected.matrix[2];
- projected.matrix[5] -= projected.x * projected.matrix[1] +
- projected.y * projected.matrix[3];
- }
- return projected;
- }
- /*
- Tick extensions
- */
- wrap(Tick.prototype, 'getMarkPath', function (proceed) {
- var path = proceed.apply(this, [].slice.call(arguments, 1));
- var pArr = [
- fix3dPosition(this.axis, { x: path[1], y: path[2], z: 0 }),
- fix3dPosition(this.axis, { x: path[4], y: path[5], z: 0 })
- ];
- return this.axis.chart.renderer.toLineSegments(pArr);
- });
- addEvent(Tick, 'afterGetLabelPosition', function (e) {
- extend(e.pos, fix3dPosition(this.axis, e.pos));
- });
- wrap(Axis.prototype, 'getTitlePosition', function (proceed) {
- var pos = proceed.apply(this, [].slice.call(arguments, 1));
- return fix3dPosition(this, pos, true);
- });
- addEvent(Axis, 'drawCrosshair', function (e) {
- if (this.chart.is3d() && this.coll !== 'colorAxis') {
- if (e.point) {
- e.point.crosshairPos = this.isXAxis ?
- e.point.axisXpos :
- this.len - (e.point.axisYpos);
- }
- }
- });
- addEvent(Axis, 'destroy', function () {
- ['backFrame', 'bottomFrame', 'sideFrame'].forEach(function (prop) {
- if (this[prop]) {
- this[prop] = this[prop].destroy();
- }
- }, this);
- });
- /*
- Z-AXIS
- */
- Axis.prototype.swapZ = function (p, insidePlotArea) {
- if (this.isZAxis) {
- var plotLeft = insidePlotArea ? 0 : this.chart.plotLeft;
- return {
- x: plotLeft + p.z,
- y: p.y,
- z: p.x - plotLeft
- };
- }
- return p;
- };
- ZAxis = H.ZAxis = function () {
- this.init.apply(this, arguments);
- };
- extend(ZAxis.prototype, Axis.prototype);
- extend(ZAxis.prototype, {
- isZAxis: true,
- setOptions: function (userOptions) {
- userOptions = merge({
- offset: 0,
- lineWidth: 0
- }, userOptions);
- Axis.prototype.setOptions.call(this, userOptions);
- this.coll = 'zAxis';
- },
- setAxisSize: function () {
- Axis.prototype.setAxisSize.call(this);
- this.width = this.len = this.chart.options.chart.options3d.depth;
- this.right = this.chart.chartWidth - this.width - this.left;
- },
- getSeriesExtremes: function () {
- var axis = this,
- chart = axis.chart;
- axis.hasVisibleSeries = false;
- // Reset properties in case we're redrawing (#3353)
- axis.dataMin =
- axis.dataMax =
- axis.ignoreMinPadding =
- axis.ignoreMaxPadding = null;
- if (axis.buildStacks) {
- axis.buildStacks();
- }
- // loop through this axis' series
- axis.series.forEach(function (series) {
- if (series.visible || !chart.options.chart.ignoreHiddenSeries) {
- var seriesOptions = series.options,
- zData,
- threshold = seriesOptions.threshold;
- axis.hasVisibleSeries = true;
- // Validate threshold in logarithmic axes
- if (axis.positiveValuesOnly && threshold <= 0) {
- threshold = null;
- }
- zData = series.zData;
- if (zData.length) {
- axis.dataMin = Math.min(
- pick(axis.dataMin, zData[0]),
- Math.min.apply(null, zData)
- );
- axis.dataMax = Math.max(
- pick(axis.dataMax, zData[0]),
- Math.max.apply(null, zData)
- );
- }
- }
- });
- }
- });
- // Get the Z axis in addition to the default X and Y.
- addEvent(Chart, 'afterGetAxes', function () {
- var chart = this,
- options = this.options,
- zAxisOptions = options.zAxis = splat(options.zAxis || {});
- if (!chart.is3d()) {
- return;
- }
- this.zAxis = [];
- zAxisOptions.forEach(function (axisOptions, i) {
- axisOptions.index = i;
- // Z-Axis is shown horizontally, so it's kind of a X-Axis
- axisOptions.isX = true;
- var zAxis = new ZAxis(chart, axisOptions);
- zAxis.setScale();
- });
- });
- // Wrap getSlotWidth function to calculate individual width value for each slot
- // (#8042).
- wrap(Axis.prototype, 'getSlotWidth', function (proceed, tick) {
- if (this.chart.is3d() &&
- tick &&
- tick.label &&
- this.categories &&
- this.chart.frameShapes
- ) {
- var chart = this.chart,
- ticks = this.ticks,
- gridGroup = this.gridGroup.element.childNodes,
- firstGridLine = gridGroup[0].getBBox(),
- frame3DLeft = chart.frameShapes.left.getBBox(),
- options3d = chart.options.chart.options3d,
- origin = {
- x: chart.plotWidth / 2,
- y: chart.plotHeight / 2,
- z: options3d.depth / 2,
- vd: pick(options3d.depth, 1) * pick(options3d.viewDistance, 0)
- },
- labelPos,
- prevLabelPos,
- nextLabelPos,
- slotWidth,
- tickId = tick.pos,
- prevTick = ticks[tickId - 1],
- nextTick = ticks[tickId + 1];
- // Check whether the tick is not the first one and previous tick exists,
- // then calculate position of previous label.
- if (tickId !== 0 && prevTick && prevTick.label.xy) { // #8621
- prevLabelPos = perspective3D({
- x: prevTick.label.xy.x,
- y: prevTick.label.xy.y,
- z: null
- }, origin, origin.vd);
- }
- // If next label position is defined, then recalculate its position
- // basing on the perspective.
- if (nextTick && nextTick.label.xy) {
- nextLabelPos = perspective3D({
- x: nextTick.label.xy.x,
- y: nextTick.label.xy.y,
- z: null
- }, origin, origin.vd);
- }
- labelPos = {
- x: tick.label.xy.x,
- y: tick.label.xy.y,
- z: null
- };
- labelPos = perspective3D(labelPos, origin, origin.vd);
- // If tick is first one, check whether next label position is already
- // calculated, then return difference between the first and the second
- // label. If there is no next label position calculated, return the
- // difference between the first grid line and left 3d frame.
- slotWidth = Math.abs(
- prevLabelPos ?
- labelPos.x - prevLabelPos.x : nextLabelPos ?
- nextLabelPos.x - labelPos.x :
- firstGridLine.x - frame3DLeft.x
- );
- return slotWidth;
- }
- return proceed.apply(this, [].slice.call(arguments, 1));
- });
- }(Highcharts));
- (function (H) {
- /* *
- * (c) 2010-2019 Torstein Honsi
- *
- * Extension to the Series object in 3D charts.
- *
- * License: www.highcharts.com/license
- */
- var addEvent = H.addEvent,
- perspective = H.perspective,
- pick = H.pick;
- // Wrap the translate method to post-translate points into 3D perspective
- addEvent(H.Series, 'afterTranslate', function () {
- if (this.chart.is3d()) {
- this.translate3dPoints();
- }
- });
- // Translate the plotX, plotY properties and add plotZ.
- H.Series.prototype.translate3dPoints = function () {
- var series = this,
- chart = series.chart,
- zAxis = pick(series.zAxis, chart.options.zAxis[0]),
- rawPoints = [],
- rawPoint,
- projectedPoints,
- projectedPoint,
- zValue,
- i;
- for (i = 0; i < series.data.length; i++) {
- rawPoint = series.data[i];
- if (zAxis && zAxis.translate) {
- zValue = zAxis.isLog && zAxis.val2lin ?
- zAxis.val2lin(rawPoint.z) :
- rawPoint.z; // #4562
- rawPoint.plotZ = zAxis.translate(zValue);
- rawPoint.isInside = rawPoint.isInside ?
- (zValue >= zAxis.min && zValue <= zAxis.max) :
- false;
- } else {
- rawPoint.plotZ = 0;
- }
- rawPoint.axisXpos = rawPoint.plotX;
- rawPoint.axisYpos = rawPoint.plotY;
- rawPoint.axisZpos = rawPoint.plotZ;
- rawPoints.push({
- x: rawPoint.plotX,
- y: rawPoint.plotY,
- z: rawPoint.plotZ
- });
- }
- projectedPoints = perspective(rawPoints, chart, true);
- for (i = 0; i < series.data.length; i++) {
- rawPoint = series.data[i];
- projectedPoint = projectedPoints[i];
- rawPoint.plotX = projectedPoint.x;
- rawPoint.plotY = projectedPoint.y;
- rawPoint.plotZ = projectedPoint.z;
- }
- };
- }(Highcharts));
- (function (H) {
- /* *
- * (c) 2010-2019 Torstein Honsi
- *
- * License: www.highcharts.com/license
- */
- var addEvent = H.addEvent,
- perspective = H.perspective,
- pick = H.pick,
- Series = H.Series,
- seriesTypes = H.seriesTypes,
- svg = H.svg,
- wrap = H.wrap;
- /**
- * Depth of the columns in a 3D column chart. Requires `highcharts-3d.js`.
- *
- * @type {number}
- * @default 25
- * @since 4.0
- * @product highcharts
- * @apioption plotOptions.column.depth
- */
- /**
- * 3D columns only. The color of the edges. Similar to `borderColor`,
- * except it defaults to the same color as the column.
- *
- * @type {Highcharts.ColorString}
- * @product highcharts
- * @apioption plotOptions.column.edgeColor
- */
- /**
- * 3D columns only. The width of the colored edges.
- *
- * @type {number}
- * @default 1
- * @product highcharts
- * @apioption plotOptions.column.edgeWidth
- */
- /**
- * The spacing between columns on the Z Axis in a 3D chart. Requires
- * `highcharts-3d.js`.
- *
- * @type {number}
- * @default 1
- * @since 4.0
- * @product highcharts
- * @apioption plotOptions.column.groupZPadding
- */
- wrap(seriesTypes.column.prototype, 'translate', function (proceed) {
- proceed.apply(this, [].slice.call(arguments, 1));
- // Do not do this if the chart is not 3D
- if (this.chart.is3d()) {
- this.translate3dShapes();
- }
- });
- // In 3D we need to pass point.outsidePlot option to the justifyDataLabel
- // method for disabling justifying dataLabels in columns outside plot
- wrap(H.Series.prototype, 'alignDataLabel', function (proceed) {
- arguments[3].outside3dPlot = arguments[1].outside3dPlot;
- proceed.apply(this, [].slice.call(arguments, 1));
- });
- // Don't use justifyDataLabel when point is outsidePlot
- wrap(H.Series.prototype, 'justifyDataLabel', function (proceed) {
- return !(arguments[2].outside3dPlot) ?
- proceed.apply(this, [].slice.call(arguments, 1)) :
- false;
- });
- seriesTypes.column.prototype.translate3dPoints = function () {};
- seriesTypes.column.prototype.translate3dShapes = function () {
- var series = this,
- chart = series.chart,
- seriesOptions = series.options,
- depth = seriesOptions.depth || 25,
- stack = seriesOptions.stacking ?
- (seriesOptions.stack || 0) :
- series.index, // #4743
- z = stack * (depth + (seriesOptions.groupZPadding || 1)),
- borderCrisp = series.borderWidth % 2 ? 0.5 : 0;
- if (chart.inverted && !series.yAxis.reversed) {
- borderCrisp *= -1;
- }
- if (seriesOptions.grouping !== false) {
- z = 0;
- }
- z += (seriesOptions.groupZPadding || 1);
- series.data.forEach(function (point) {
- // #7103 Reset outside3dPlot flag
- point.outside3dPlot = null;
- if (point.y !== null) {
- var shapeArgs = point.shapeArgs,
- tooltipPos = point.tooltipPos,
- // Array for final shapeArgs calculation.
- // We are checking two dimensions (x and y).
- dimensions = [['x', 'width'], ['y', 'height']],
- borderlessBase; // Crisped rects can have +/- 0.5 pixels offset.
- // #3131 We need to check if column is inside plotArea.
- dimensions.forEach(function (d) {
- borderlessBase = shapeArgs[d[0]] - borderCrisp;
- if (borderlessBase < 0) {
- // If borderLessBase is smaller than 0, it is needed to set
- // its value to 0 or 0.5 depending on borderWidth
- // borderWidth may be even or odd.
- shapeArgs[d[1]] += shapeArgs[d[0]] + borderCrisp;
- shapeArgs[d[0]] = -borderCrisp;
- borderlessBase = 0;
- }
- if (
- (
- borderlessBase + shapeArgs[d[1]] >
- series[d[0] + 'Axis'].len
- ) &&
- // Do not change height/width of column if 0 (#6708)
- shapeArgs[d[1]] !== 0
- ) {
- shapeArgs[d[1]] =
- series[d[0] + 'Axis'].len - shapeArgs[d[0]];
- }
- if (
- // Do not remove columns with zero height/width.
- (shapeArgs[d[1]] !== 0) &&
- (
- shapeArgs[d[0]] >= series[d[0] + 'Axis'].len ||
- shapeArgs[d[0]] + shapeArgs[d[1]] <= borderCrisp
- )
- ) {
- // Set args to 0 if column is outside the chart.
- for (var key in shapeArgs) {
- shapeArgs[key] = 0;
- }
- // #7103 outside3dPlot flag is set on Points which are
- // currently outside of plot.
- point.outside3dPlot = true;
- }
- });
- // Change from 2d to 3d
- if (point.shapeType === 'rect') {
- point.shapeType = 'cuboid';
- }
- shapeArgs.z = z;
- shapeArgs.depth = depth;
- shapeArgs.insidePlotArea = true;
- // Translate the tooltip position in 3d space
- tooltipPos = perspective(
- [{ x: tooltipPos[0], y: tooltipPos[1], z: z }],
- chart,
- true
- )[0];
- point.tooltipPos = [tooltipPos.x, tooltipPos.y];
- }
- });
- // store for later use #4067
- series.z = z;
- };
- wrap(seriesTypes.column.prototype, 'animate', function (proceed) {
- if (!this.chart.is3d()) {
- proceed.apply(this, [].slice.call(arguments, 1));
- } else {
- var args = arguments,
- init = args[1],
- yAxis = this.yAxis,
- series = this,
- reversed = this.yAxis.reversed;
- if (svg) { // VML is too slow anyway
- if (init) {
- series.data.forEach(function (point) {
- if (point.y !== null) {
- point.height = point.shapeArgs.height;
- point.shapey = point.shapeArgs.y; // #2968
- point.shapeArgs.height = 1;
- if (!reversed) {
- if (point.stackY) {
- point.shapeArgs.y =
- point.plotY + yAxis.translate(point.stackY);
- } else {
- point.shapeArgs.y =
- point.plotY +
- (
- point.negative ?
- -point.height :
- point.height
- );
- }
- }
- }
- });
- } else { // run the animation
- series.data.forEach(function (point) {
- if (point.y !== null) {
- point.shapeArgs.height = point.height;
- point.shapeArgs.y = point.shapey; // #2968
- // null value do not have a graphic
- if (point.graphic) {
- point.graphic.animate(
- point.shapeArgs,
- series.options.animation
- );
- }
- }
- });
- // redraw datalabels to the correct position
- this.drawDataLabels();
- // delete this function to allow it only once
- series.animate = null;
- }
- }
- }
- });
- // In case of 3d columns there is no sense to add this columns to a specific
- // series group - if series is added to a group all columns will have the same
- // zIndex in comparison with different series.
- wrap(
- seriesTypes.column.prototype,
- 'plotGroup',
- function (proceed, prop, name, visibility, zIndex, parent) {
- if (this.chart.is3d() && parent && !this[prop]) {
- if (!this.chart.columnGroup) {
- this.chart.columnGroup =
- this.chart.renderer.g('columnGroup').add(parent);
- }
- this[prop] = this.chart.columnGroup;
- this.chart.columnGroup.attr(this.getPlotBox());
- this[prop].survive = true;
- }
- return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
- }
- );
- // When series is not added to group it is needed to change setVisible method to
- // allow correct Legend funcionality. This wrap is basing on pie chart series.
- wrap(
- seriesTypes.column.prototype,
- 'setVisible',
- function (proceed, vis) {
- var series = this,
- pointVis;
- if (series.chart.is3d()) {
- series.data.forEach(function (point) {
- point.visible = point.options.visible = vis =
- vis === undefined ? !point.visible : vis;
- pointVis = vis ? 'visible' : 'hidden';
- series.options.data[series.data.indexOf(point)] =
- point.options;
- if (point.graphic) {
- point.graphic.attr({
- visibility: pointVis
- });
- }
- });
- }
- proceed.apply(this, Array.prototype.slice.call(arguments, 1));
- }
- );
- seriesTypes.column.prototype.handle3dGrouping = true;
- addEvent(Series, 'afterInit', function () {
- if (this.chart.is3d() && this.handle3dGrouping) {
- var seriesOptions = this.options,
- grouping = seriesOptions.grouping,
- stacking = seriesOptions.stacking,
- reversedStacks = pick(this.yAxis.options.reversedStacks, true),
- z = 0;
- if (!(grouping !== undefined && !grouping)) {
- var stacks = this.chart.retrieveStacks(stacking),
- stack = seriesOptions.stack || 0,
- i; // position within the stack
- for (i = 0; i < stacks[stack].series.length; i++) {
- if (stacks[stack].series[i] === this) {
- break;
- }
- }
- z = (10 * (stacks.totalStacks - stacks[stack].position)) +
- (reversedStacks ? i : -i); // #4369
- // In case when axis is reversed, columns are also reversed inside
- // the group (#3737)
- if (!this.xAxis.reversed) {
- z = (stacks.totalStacks * 10) - z;
- }
- }
- seriesOptions.zIndex = z;
- }
- });
- function pointAttribs(proceed) {
- var attr = proceed.apply(this, [].slice.call(arguments, 1));
- if (this.chart.is3d && this.chart.is3d()) {
- // Set the fill color to the fill color to provide a smooth edge
- attr.stroke = this.options.edgeColor || attr.fill;
- attr['stroke-width'] = pick(this.options.edgeWidth, 1); // #4055
- }
- return attr;
- }
- wrap(seriesTypes.column.prototype, 'pointAttribs', pointAttribs);
- if (seriesTypes.columnrange) {
- wrap(seriesTypes.columnrange.prototype, 'pointAttribs', pointAttribs);
- seriesTypes.columnrange.prototype.plotGroup =
- seriesTypes.column.prototype.plotGroup;
- seriesTypes.columnrange.prototype.setVisible =
- seriesTypes.column.prototype.setVisible;
- }
- wrap(Series.prototype, 'alignDataLabel', function (proceed) {
- // Only do this for 3D columns and it's derived series
- if (
- this.chart.is3d() &&
- this instanceof seriesTypes.column
- ) {
- var series = this,
- chart = series.chart;
- var args = arguments,
- alignTo = args[4],
- point = args[1];
- var pos = ({ x: alignTo.x, y: alignTo.y, z: series.z });
- pos = perspective([pos], chart, true)[0];
- alignTo.x = pos.x;
- // #7103 If point is outside of plotArea, hide data label.
- alignTo.y = point.outside3dPlot ? -9e9 : pos.y;
- }
- proceed.apply(this, [].slice.call(arguments, 1));
- });
- // Added stackLabels position calculation for 3D charts.
- wrap(H.StackItem.prototype, 'getStackBox', function (proceed, chart) { // #3946
- var stackBox = proceed.apply(this, [].slice.call(arguments, 1));
- // Only do this for 3D chart.
- if (chart.is3d()) {
- var pos = ({
- x: stackBox.x,
- y: stackBox.y,
- z: 0
- });
- pos = H.perspective([pos], chart, true)[0];
- stackBox.x = pos.x;
- stackBox.y = pos.y;
- }
- return stackBox;
- });
- /*
- @merge v6.2
- @todo
- EXTENSION FOR 3D CYLINDRICAL COLUMNS
- Not supported
- */
- /*
- var defaultOptions = H.getOptions();
- defaultOptions.plotOptions.cylinder =
- H.merge(defaultOptions.plotOptions.column);
- var CylinderSeries = H.extendClass(seriesTypes.column, {
- type: 'cylinder'
- });
- seriesTypes.cylinder = CylinderSeries;
- wrap(seriesTypes.cylinder.prototype, 'translate', function (proceed) {
- proceed.apply(this, [].slice.call(arguments, 1));
- // Do not do this if the chart is not 3D
- if (!this.chart.is3d()) {
- return;
- }
- var series = this,
- chart = series.chart,
- options = chart.options,
- cylOptions = options.plotOptions.cylinder,
- options3d = options.chart.options3d,
- depth = cylOptions.depth || 0,
- alpha = chart.alpha3d;
- var z = cylOptions.stacking ?
- (this.options.stack || 0) * depth :
- series._i * depth;
- z += depth / 2;
- if (cylOptions.grouping !== false) { z = 0; }
- each(series.data, function (point) {
- var shapeArgs = point.shapeArgs,
- deg2rad = H.deg2rad;
- point.shapeType = 'arc3d';
- shapeArgs.x += depth / 2;
- shapeArgs.z = z;
- shapeArgs.start = 0;
- shapeArgs.end = 2 * PI;
- shapeArgs.r = depth * 0.95;
- shapeArgs.innerR = 0;
- shapeArgs.depth =
- shapeArgs.height * (1 / sin((90 - alpha) * deg2rad)) - z;
- shapeArgs.alpha = 90 - alpha;
- shapeArgs.beta = 0;
- });
- });
- */
- }(Highcharts));
- (function (H) {
- /* *
- * (c) 2010-2019 Torstein Honsi
- *
- * 3D pie series
- *
- * License: www.highcharts.com/license
- */
- var deg2rad = H.deg2rad,
- pick = H.pick,
- seriesTypes = H.seriesTypes,
- svg = H.svg,
- wrap = H.wrap;
- /**
- * The thickness of a 3D pie. Requires `highcharts-3d.js`
- *
- * @type {number}
- * @default 0
- * @since 4.0
- * @product highcharts
- * @apioption plotOptions.pie.depth
- */
- wrap(seriesTypes.pie.prototype, 'translate', function (proceed) {
- proceed.apply(this, [].slice.call(arguments, 1));
- // Do not do this if the chart is not 3D
- if (!this.chart.is3d()) {
- return;
- }
- var series = this,
- seriesOptions = series.options,
- depth = seriesOptions.depth || 0,
- options3d = series.chart.options.chart.options3d,
- alpha = options3d.alpha,
- beta = options3d.beta,
- z = seriesOptions.stacking ?
- (seriesOptions.stack || 0) * depth :
- series._i * depth;
- z += depth / 2;
- if (seriesOptions.grouping !== false) {
- z = 0;
- }
- series.data.forEach(function (point) {
- var shapeArgs = point.shapeArgs,
- angle;
- point.shapeType = 'arc3d';
- shapeArgs.z = z;
- shapeArgs.depth = depth * 0.75;
- shapeArgs.alpha = alpha;
- shapeArgs.beta = beta;
- shapeArgs.center = series.center;
- angle = (shapeArgs.end + shapeArgs.start) / 2;
- point.slicedTranslation = {
- translateX: Math.round(
- Math.cos(angle) *
- seriesOptions.slicedOffset *
- Math.cos(alpha * deg2rad)
- ),
- translateY: Math.round(
- Math.sin(angle) *
- seriesOptions.slicedOffset *
- Math.cos(alpha * deg2rad)
- )
- };
- });
- });
- wrap(
- seriesTypes.pie.prototype.pointClass.prototype,
- 'haloPath',
- function (proceed) {
- var args = arguments;
- return this.series.chart.is3d() ? [] : proceed.call(this, args[1]);
- }
- );
- wrap(
- seriesTypes.pie.prototype,
- 'pointAttribs',
- function (proceed, point, state) {
- var attr = proceed.call(this, point, state),
- options = this.options;
- if (this.chart.is3d() && !this.chart.styledMode) {
- attr.stroke = options.edgeColor || point.color || this.color;
- attr['stroke-width'] = pick(options.edgeWidth, 1);
- }
- return attr;
- }
- );
- wrap(seriesTypes.pie.prototype, 'drawDataLabels', function (proceed) {
- if (this.chart.is3d()) {
- var series = this,
- chart = series.chart,
- options3d = chart.options.chart.options3d;
- series.data.forEach(function (point) {
- var shapeArgs = point.shapeArgs,
- r = shapeArgs.r,
- // #3240 issue with datalabels for 0 and null values
- a1 = (shapeArgs.alpha || options3d.alpha) * deg2rad,
- b1 = (shapeArgs.beta || options3d.beta) * deg2rad,
- a2 = (shapeArgs.start + shapeArgs.end) / 2,
- labelPosition = point.labelPosition,
- connectorPosition = labelPosition.connectorPosition,
- yOffset = (-r * (1 - Math.cos(a1)) * Math.sin(a2)),
- xOffset = r * (Math.cos(b1) - 1) * Math.cos(a2);
- // Apply perspective on label positions
- [
- labelPosition.natural,
- connectorPosition.breakAt,
- connectorPosition.touchingSliceAt
- ].forEach(function (coordinates) {
- coordinates.x += xOffset;
- coordinates.y += yOffset;
- });
- });
- }
- proceed.apply(this, [].slice.call(arguments, 1));
- });
- wrap(seriesTypes.pie.prototype, 'addPoint', function (proceed) {
- proceed.apply(this, [].slice.call(arguments, 1));
- if (this.chart.is3d()) {
- // destroy (and rebuild) everything!!!
- this.update(this.userOptions, true); // #3845 pass the old options
- }
- });
- wrap(seriesTypes.pie.prototype, 'animate', function (proceed) {
- if (!this.chart.is3d()) {
- proceed.apply(this, [].slice.call(arguments, 1));
- } else {
- var args = arguments,
- init = args[1],
- animation = this.options.animation,
- attribs,
- center = this.center,
- group = this.group,
- markerGroup = this.markerGroup;
- if (svg) { // VML is too slow anyway
- if (animation === true) {
- animation = {};
- }
- // Initialize the animation
- if (init) {
- // Scale down the group and place it in the center
- group.oldtranslateX = group.translateX;
- group.oldtranslateY = group.translateY;
- attribs = {
- translateX: center[0],
- translateY: center[1],
- scaleX: 0.001, // #1499
- scaleY: 0.001
- };
- group.attr(attribs);
- if (markerGroup) {
- markerGroup.attrSetters = group.attrSetters;
- markerGroup.attr(attribs);
- }
- // Run the animation
- } else {
- attribs = {
- translateX: group.oldtranslateX,
- translateY: group.oldtranslateY,
- scaleX: 1,
- scaleY: 1
- };
- group.animate(attribs, animation);
- if (markerGroup) {
- markerGroup.animate(attribs, animation);
- }
- // Delete this function to allow it only once
- this.animate = null;
- }
- }
- }
- });
- }(Highcharts));
- (function (H) {
- /* *
- * (c) 2010-2019 Torstein Honsi
- *
- * Scatter 3D series.
- *
- * License: www.highcharts.com/license
- */
- var Point = H.Point,
- seriesType = H.seriesType,
- seriesTypes = H.seriesTypes;
- /**
- * @private
- * @class
- * @name Highcharts.seriesTypes.scatter3d
- *
- * @augments Highcharts.Series
- */
- seriesType(
- 'scatter3d',
- 'scatter',
- /**
- * A 3D scatter plot uses x, y and z coordinates to display values for three
- * variables for a set of data.
- *
- * @sample {highcharts} highcharts/3d/scatter/
- * Simple 3D scatter
- * @sample {highcharts} highcharts/demo/3d-scatter-draggable
- * Draggable 3d scatter
- *
- * @extends plotOptions.scatter
- * @product highcharts
- * @optionparent plotOptions.scatter3d
- */
- {
- tooltip: {
- pointFormat: 'x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>z: <b>{point.z}</b><br/>'
- }
- // Series class
- }, {
- pointAttribs: function (point) {
- var attribs = seriesTypes.scatter.prototype.pointAttribs
- .apply(this, arguments);
- if (this.chart.is3d() && point) {
- attribs.zIndex = H.pointCameraDistance(point, this.chart);
- }
- return attribs;
- },
- axisTypes: ['xAxis', 'yAxis', 'zAxis'],
- pointArrayMap: ['x', 'y', 'z'],
- parallelArrays: ['x', 'y', 'z'],
- // Require direct touch rather than using the k-d-tree, because the
- // k-d-tree currently doesn't take the xyz coordinate system into
- // account (#4552)
- directTouch: true
- // Point class
- }, {
- applyOptions: function () {
- Point.prototype.applyOptions.apply(this, arguments);
- if (this.z === undefined) {
- this.z = 0;
- }
- return this;
- }
- }
- );
- /**
- * A `scatter3d` series. If the [type](#series.scatter3d.type) option is
- * not specified, it is inherited from [chart.type](#chart.type).
- *
- * scatter3d](#plotOptions.scatter3d).
- *
- * @extends series,plotOptions.scatter3d
- * @product highcharts
- * @apioption series.scatter3d
- */
- /**
- * An array of data points for the series. For the `scatter3d` series
- * type, points can be given in the following ways:
- *
- * 1. An array of arrays with 3 values. In this case, the values correspond
- * to `x,y,z`. If the first value is a string, it is applied as the name
- * of the point, and the `x` value is inferred.
- *
- * ```js
- * data: [
- * [0, 0, 1],
- * [1, 8, 7],
- * [2, 9, 2]
- * ]
- * ```
- *
- * 3. An array of objects with named values. The following snippet shows only a
- * few settings, see the complete options set below. If the total number of data
- * points exceeds the series'
- * [turboThreshold](#series.scatter3d.turboThreshold), this option is not
- * available.
- *
- * ```js
- * data: [{
- * x: 1,
- * y: 2,
- * z: 24,
- * name: "Point2",
- * color: "#00FF00"
- * }, {
- * x: 1,
- * y: 4,
- * z: 12,
- * name: "Point1",
- * color: "#FF00FF"
- * }]
- * ```
- *
- * @sample {highcharts} highcharts/chart/reflow-true/
- * Numerical values
- * @sample {highcharts} highcharts/series/data-array-of-arrays/
- * Arrays of numeric x and y
- * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
- * Arrays of datetime x and y
- * @sample {highcharts} highcharts/series/data-array-of-name-value/
- * Arrays of point.name and y
- * @sample {highcharts} highcharts/series/data-array-of-objects/
- * Config objects
- *
- * @type {Array<Array<number>|*>}
- * @extends series.scatter.data
- * @product highcharts
- * @apioption series.scatter3d.data
- */
- /**
- * The z value for each data point.
- *
- * @type {number}
- * @product highcharts
- * @apioption series.scatter3d.data.z
- */
- }(Highcharts));
- (function (H) {
- /* *
- * (c) 2010-2019 Torstein Honsi
- *
- * Extension to the VML Renderer
- *
- * License: www.highcharts.com/license
- */
- var addEvent = H.addEvent,
- Axis = H.Axis,
- SVGRenderer = H.SVGRenderer,
- VMLRenderer = H.VMLRenderer;
- if (VMLRenderer) {
- H.setOptions({ animate: false });
- VMLRenderer.prototype.face3d = SVGRenderer.prototype.face3d;
- VMLRenderer.prototype.polyhedron = SVGRenderer.prototype.polyhedron;
- VMLRenderer.prototype.elements3d = SVGRenderer.prototype.elements3d;
- VMLRenderer.prototype.element3d = SVGRenderer.prototype.element3d;
- VMLRenderer.prototype.cuboid = SVGRenderer.prototype.cuboid;
- VMLRenderer.prototype.cuboidPath = SVGRenderer.prototype.cuboidPath;
- VMLRenderer.prototype.toLinePath = SVGRenderer.prototype.toLinePath;
- VMLRenderer.prototype.toLineSegments = SVGRenderer.prototype.toLineSegments;
- VMLRenderer.prototype.arc3d = function (shapeArgs) {
- var result = SVGRenderer.prototype.arc3d.call(this, shapeArgs);
- result.css({ zIndex: result.zIndex });
- return result;
- };
- H.VMLRenderer.prototype.arc3dPath = H.SVGRenderer.prototype.arc3dPath;
- addEvent(Axis, 'render', function () {
- // VML doesn't support a negative z-index
- if (this.sideFrame) {
- this.sideFrame.css({ zIndex: 0 });
- this.sideFrame.front.attr({ fill: this.sideFrame.color });
- }
- if (this.bottomFrame) {
- this.bottomFrame.css({ zIndex: 1 });
- this.bottomFrame.front.attr({ fill: this.bottomFrame.color });
- }
- if (this.backFrame) {
- this.backFrame.css({ zIndex: 0 });
- this.backFrame.front.attr({ fill: this.backFrame.color });
- }
- });
- }
- }(Highcharts));
- return (function () {
- }());
- }));
|