legned (line과 scatter) 연결 관련 질문 드립니다.

[qudgur5442]

안녕하세요 . jui를 사용중에 그래프를 그리는게 잘 안되어 이렇게 질문을 올립니다.

legend의 목록 ( rainfall,sealevel,temperature)가 표현이 되어야 하며, filter기능이 같은 타겟의 line과scatter//area와 scatter // column이 같이 작동 하도록 사용하고싶습니다. tooltip기능을 사용하고 있어서 line은 filter가 되는데 scatter는 남아 있어 기능이 안도는것처럼 보여 집니다. 사용 방법을 알 수 있을까요?

아래의 legend 부분이 line과 column or area와 같이 사용하고 있습니다.

아래는 현재 테스트 중인 소스 입니다.

var chart = jui.include("chart.builder");
var data = [
    { month : "Jan", rainfall : 49.9, sealevel : 1016, temperature : 7.0},
    { month : "Feb", rainfall : 71.5, sealevel : 1016, temperature : 6.9 },
    { month : "Mar", rainfall : 106.49, sealevel : 1015.9, temperature : 9.5 },
    { month : "Apr", rainfall : 129.2, sealevel : 1015.5, temperature : 14.5 },
    { month : "May", rainfall : 144.0, sealevel : 1012.3, temperature : 18.2 },
    { month : "Jun", rainfall : 176.0, sealevel : 1009.5, temperature : 21.5 },
    { month : "Jul", rainfall : 135.6, sealevel : 1009.6, temperature : 25.2 },
    { month : "Aug", rainfall : 148.5, sealevel : 1010.2, temperature : 26.5 },
    { month :  "Sep", rainfall : 216.4, sealevel : 1013.1, temperature : 23.3 },
    { month :  "Oct", rainfall : 194.1, sealevel : 1016.9, temperature : 18.3 },
    { month :  "Nov", rainfall : 95.6, sealevel : 1018.2, temperature : 13.9},
    { month :  "Dec", rainfall : 54.4, sealevel : 1016.7, temperature : 9.6}
];

chart("#result", {
    padding : {
        right : 120
    },
    axis : [{
        x : {
            domain : "month",
            line : true
        },
        y : {
            type : "range",
            domain: [ 0, 300 ],
            step : 6,
            color : "#7cb5ec",
            format : function(value) {
                return value + " mm";
            }
        },
        data : data
    }, {
        x : {
            hide : true
        },
        y : {
            domain : [ 1008, 1020 ],
            dist : 50,
            color : "#434348",
            format : function(value) {
                return value + " mb";
            },
            orient : "right"
        },
        extend : 0
    }, {
        y : {
            domain: [ 5, 35 ],
            dist : 0,
            color: "#90ed7d",
            format: function (value) {
                return value + " ℃";
            }
        },
        extend : 1
    }],
    brush : [
        { type : "column", target : "rainfall", colors : [ "#7cb5ec" ], outerPadding : 5 },
        { type : "line", target : "sealevel", axis : 1, colors : [ "#434348" ] , symbol : "curve" },
        { type : "line", target : "temperature", axis : 2, colors: [ "#90ed7d" ], symbol : "curve" },
        { type : "scatter", target : "sealevel", axis : 1, colors : [ "#434348" ] },
        { type : "scatter", target : "temperature", axis : 2, colors: [ "#90ed7d" ], symbol : "triangle", size : 8 }
    ],
    widget : [
      { type : "legend", brush : [0,1,2], align : "end" ,filter:true,  brushSync:true},
      {
                type : "tooltip",
                orient : "right",
            brush : [0, 3,4],
            format: function(data, k) {
                        return {
                            key: k,
                            value: data[k]
                        };
                    },
            }
    ]
});

[seogi1004]

@qudgur5442 ;; 두개의 브러쉬를 동시에 필터링 할 것이라는 생각을 못했네요. ㅜㅜ brush 배열로 하는게 아니라 axis 단위로 위젯을 전면 수정해야할 것 같습니다.

[seogi1004]

brushSync는 하나의 브러쉬에 여러개의 타겟이 있을 경우에 적용할 수 있는 옵션이에요. 애초에 만든 목적이 @qudgur5442이 쓰시는 목적과 다릅니다. ㅠㅠ

[qudgur5442]

@seogi1004 확인해 주셔서 감사합니다. 수정 완료되면 답장 부탁드립니다.!!