2014-09-23 14 views
6

그래서 URL에서 JSON에서 생성 된 선 그래프의 색을 변경하려고하는데 문제가 있습니다. 여기C3.js 선 그래프 색 URL

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
     url: '../URL.JSON', 
     mimeType: 'json', 
     keys: { 
      x: 'Date', 
      value: ["Line1", "Line2", "Line3", "Line4"] 
     }, 
     type: 'line' 
    }, 
    axis: { 
     x: { 
      type: 'category' 
     } 
    }, 
    size: { 
     height: 500 
    }, 
    colors: { 
     'Line1': '#ff0000' 
    } 
}); 

그리고 내 JSON 형식입니다 : 색깔이 전혀 호선의 색상이 설정 속성을 변경하지 않는 몇 가지 이유를 들어

[ 
    {'Date': '9/23/2014', 'Line1': 12, 'Line2': 54, 'Line3': 23, 'Line4': 5}, 
    {'Date': '9/22/2014', 'Line1': 56, 'Line2': 18, 'Line3': 25, 'Line4': 0} 
] 

여기 차트를 생성하는 내 코드입니다. 그래서 누군가가 c3 그래프를 생성 한 URL로 색상을 변경하는 방법을 알고 있는지 궁금합니다.

고마워요.

답변

7

나는 내 자신의 질문에 대한 대답을 알아 냈으므로 여기에 게시 할 것이라고 생각했습니다.

color: { 
    pattern: ['#363FBC', '#363FBC', '#B73540', '#B73540'] 
} 

대신에 :

나는 추가했다

colors: { 
    'Line1': '#ff0000' 
} 
+1

감사합니다 친구. [docs는'colors' 객체를 가리 킵니다.] (http://c3js.org/samples/api_data_color.html),'pattern' 배열을 사용하여 예제없이 작업 할 수 없었습니다. – BradGreens

+0

위대한 발견 감사. – Obsidian

1

colors PARAM이처럼 data 객체의 내부에 있어야한다 :

data: { 
    columns: [ 
     ['data1', 30, 20, 50, 40, 60, 50], 
     ['data2', 200, 130, 90, 240, 130, 220], 
     ['data3', 300, 200, 160, 400, 250, 250] 
    ], 
    type: 'bar', 
    colors: { 
     data1: '#ff0000', 
     data2: '#00ff00', 
     data3: '#0000ff' 
    } 
}