2017-02-20 5 views
0

동일한 x, y 값을 갖는 점이있는 데이터의 예제는 다음과 같습니다. 오버레이 된 세로 막 대형 차트에서 나타납니다. 서로에 - stackedColumn 차트 유형에서와 같이 서로 위에 쳐다 보게하는 방법이 있습니까? JSON 데이터의 http://jsfiddle.net/yjxoLr9e/동일한 x 값과 y 값을 가진 두 개의 데이터 포인트를 갖는 투쟁 stackColumn 차트 유형 즉, 서로 위에 더함

부 :

"purchaseRows": [ 
{x: new Date("2017-03-10"), y:600}, 
{x: new Date("2017-04-06"), y:504}, 
{x: new Date("2017-04-06"), y:600}, 
{x: new Date("2017-05-03"), y:504}, 
{x: new Date("2017-05-03"), y:504}, 
{x: new Date("2017-06-05"), y:504}, 
{x: new Date("2017-08-07"), y:714}, 
{x: new Date("2017-09-04"), y:714}, 
{x: new Date("2017-10-02"), y:504}, 
{x: new Date("2017-11-06"), y:504}, 
{x: new Date("2017-12-04"), y:540}, 
], 

데이터 어레이로서

data: [  { type: "stepLine", showInLegend: true, lineThickness: 2, name: "Transactions", markerSize: 5, markerType: "circle", color: "SteelBlue", dataPoints: json.transactionData }, 
        { type: "stepLine", lineDashType: "dot", showInLegend: true, lineThickness: 2, name: "Stock forecast", markerSize: 5, markerType: "circle", color: "SteelBlue", dataPoints: json.stockForecast }, 
        { type: "stackedColumn", showInLegend: true, lineThickness: 0, name: "Backlog", markerSize: 8, markerType: "circle", color: "coral", dataPoints: json.currentbacklog }, 
        { type: "stackedColumn", showInLegend: true, lineThickness: 0, name: "Demand", markerSize: 8, markerType: "circle", color: "red", dataPoints: json.unconsumedFcst }, 
        { type: "line", showInLegend: true, lineThickness: 0, name: "Stock", markerSize: 8, markerType: "circle", color: "red", dataPoints: json.currentStock }, 
        { type: "column", showInLegend: true, lineThickness: 2, name: "Purchase rows", markerSize: 8, markerType: "circle", color: "lightgreen", dataPoints: json.purchaseRows } 

     ], 
+1

CanvasJS에는 세로 막 대형 차트가 누적되어 있습니다. 당신은 아마 그것을 사용할 수 있습니다. 다음은 동일한 문서 페이지입니다. : http://canvasjs.com/docs/charts/chart-types/html5-stacked-column-chart/ – Beevk

답변

1

Beevk이 정확한지 차트 종류 stackedColumn 트릭을 DORS이다

작동 샘플을 참조.