멀티 바 그래프 NVD3, d3.js

Question

NVD3 상단의 라인 그래프는 multi bar chart 및 line plus bar chart입니다. 하지만 마치 멀티 바 플러스 차트와 같은 것이 아닙니다.

일종의 라인 플러스 막대 차트를 사용하여 멀티 바 선 차트로 만들었습니다.

[ 
    { 
    "key" : "Quantity", 
    "bar": true, 
    "values" : [[1136005200000, 127], [1138683600000, 271]] 
    }, 
    { 
    "key" : "Quantity1", 
    "bar": true, 
    "values" : [[1136005200000, 127], [1138683600000, 271]] 
    }, 
    { 
    "key" : "Price", 
    "values" : [[1136005200000, 71.89], [1138683600000, 75.51]] 
    } 
] 

이 모두 라벨을 나타낸다 : 따라서

[ 
    { 
    "key" : "Quantity", 
    "bar": true, 
    "values" : [[1136005200000, 127], [1138683600000, 271]] 
    }, 
    { 
    "key" : "Price", 
    "values" : [[1136005200000, 71.89], [1138683600000, 75.51]] 
    } 
] 

이 여러 줄을 추가하는 난에 데이터를 변경하려고 : 여기

라인 플러스 막대 그래프는 데이터를 수용하는 형식 , 수량 및 Quantity1 상단에 있지만 막대의 총 수를 여전히 두 (각각에 대해 각각 대신 두 개)입니다. 내가 상단에있는 라벨을 얻고 있기 때문에

, 나는 어떻게 든이 여기에 :)

행할 수있는 fiddle하다고 생각합니다.

문제 설명 : 다양한 서적이있는 서점이 있다고합시다. 나는 그 달의 막대 그래프와 총 판매로 한 달 동안 하루에 팔리는 책의 최대와 최소를 선 그래프로 보여주고 싶습니다. 따라서 x 축에 매월 2 개의 막대와 1 개의 점 (선 그래프의 경우)이 있어야합니다.

Answer 1

nvd3 패키지 예제의 multiChart.html 예제를 확인하십시오. 이 예제에서는 multiChart 유형을 사용하고 각 x 점당 2 줄의 점, 2 개의 영역 점 및 3 개의 막대를 표시하므로 막대 2 개 및 점 1 개만 표시 할 수도 있습니다.

Answer 2

이 질문에 대한 궁금한 사항은 nv.models.multiChart에서 스택을 true로 설정하거나 nv.models.multiChart를 기반으로 다른 모델을 만드는 것입니다. 소스 코드에서

bars1 = nv.models.multiBar().stacked(true).yScale(yScale1), 
    bars2 = nv.models.multiBar().stacked(true).yScale(yScale2) 

행 번호는 :

https://github.com/novus/nvd3/blob/master/src/models/multiChart.js#L34

그리고 나는 그렇게 등에서 데이터를 전달 해요 :

data.push({ 
        type: "bar", 
        key: series.name, 
        values: seriesData, 
        yAxis: 1 
       } 
      )