juijs / jui-chart

SVG-based JUI chart that can be used in the browser and Node.js. Support many types of charts. (Dashboard, Map, Topology, Full 3D, Realtime)
https://codepen.io/collection/nLydod/
57 stars 25 forks source link

Overlap Column Chart 적용 문의 #210

Closed ingus26 closed 4 years ago

ingus26 commented 5 years ago

안녕하세요 Overlap Column Chart 적용할때 아래와 같은 오류가 나서 질문드립니다. chart play 소스로는 적용이 안되서, 다운로드 파일 내 example소스 참고했습니다.

<오류 내용> jui-core.js:1570 JUI_WARNING_MSG: 'util.svg.element.path' is not loaded include @ jui-core.js:1570 Element.is @ jui-chart.js:6376 (anonymous) @ jui-chart.js:18101 Element.each @ jui-chart.js:6161 ColumnBrush.drawAnimate @ jui-chart.js:18100 Draw.render @ jui-chart.js:9137 drawBrush @ jui-chart.js:10554 UI.render @ jui-chart.js:11284 UI.init @ jui-chart.js:11030 createUIObject @ jui-chart.js:3811 (anonymous) @ jui-chart.js:5446 (anonymous) @ ATSReport_r3List:273 (anonymous) @ jui-chart.js:3701 resolveWith @ jui-chart.js:3541 ready @ jui-chart.js:3434 load (async) bindReady @ jui-chart.js:3460 ready @ jui-chart.js:3610 ready @ jui-chart.js:3696 (anonymous) @ ATSReport_r3List:201 (anonymous) @ jui-core.js:1301 resolveWith @ jui-core.js:1038 ready @ jui-core.js:935 DOMContentLoaded @ jui-core.js:1094 jui-chart.js:6376 Uncaught TypeError: Right-hand side of 'instanceof' is not an object at PathRectElement.Element.is (jui-chart.js:6376) at PathRectElement. (jui-chart.js:18101) at TransElement.Element.each (jui-chart.js:6161) at ColumnBrush.drawAnimate (jui-chart.js:18100) at ColumnBrush.Draw.render (jui-chart.js:9137) at drawBrush (jui-chart.js:10554) at UI.init.UI.render (jui-chart.js:11284) at new UI.init (jui-chart.js:11030) at Object.createUIObject (jui-chart.js:3811) at jui-chart.js:5446

<소스 코드> graph.ready([ "chart.builder" ], function(builder) {

    builder("#chart3", {
        axis : {
            data : [
                 { quarter : "1Q", samsung : 300, apple : 450, google : 430, facebook: 350 },
                 { quarter : "2Q", samsung : 200, apple : 430, google : 410, facebook: 280 },
                 { quarter : "3Q", samsung : 190, apple : 360, google : 380, facebook: 320 },
                 { quarter : "4Q", samsung : 260, apple : 470, google : 350, facebook: 340 }
            ],
            x : {
                type : "block",
                domain : "quarter",
                line : true
            },
            y : {
                type : "range",
                step : 10,
                line : true,
                format : function(d) {
                    return "$" + d + "B";
                },
                domain : function(d) {
                    return 500;
                },
                orient : "right"
            }
        },
        brush : {
            type : "column",
            target : [ "samsung", "apple", "google", "facebook" ],
            innerPadding : -20,
            outerPadding : 20,
            animate : true
        },
        widget : [
            { type : "title", text : "Column Sample" },
            { type : "tooltip" },
            { type : "legend" }
        ]
    });

});