2017-04-19 81 views
1

我目前使用anycharts react plugin爲了創建演示,但我無法弄清楚如何更改默認主題。任何機構都有一個想法。Anychart反應設置主題

我想:

import React from 'react' 
import AnyChart from 'anychart-react' 
import './anychart-ui.scss' 

const data = [ 
    ['p1', 5, 4], 
    ['p2', 6, 2], 
    ['p3', 3, 7], 
    ['p4', 1, 5] 
] 

const complexSettings = { 
    width: 800, 
    height: 600, 
    type: 'column', 
    data: 'P1,5\nP2,3\nP3,6\nP4,4', 
    title: 'Column chart', 
    yAxis: [1, { 
    orientation: 'right', 
    enabled: true, 
    labels: { 
     textFormatter: '{%Value}{decimalPoint:\\,}', 
     fontColor: 'red' 
    } 
    }], 
    legend: { 
    background: 'lightgreen 0.4', 
    padding: 0 
    }, 
    lineMarker: { 
    value: 4.5 
    } 
} 

const customTheme = { 
    // define settings for bar charts 
    'bar': { 
    // set chart title 
    'title': { 
     'text': 'Bar Chart', 
     'enabled': true 
    }, 
    // settings for default x axis 
    'defaultXAxisSettings': { 
     // set x axis title 
     'title': { 
     'text': 'Retail Channel', 
     'enabled': true 
     } 
    }, 
    // settings for default y axis 
    'defaultYAxisSettings': { 
     // set axis name 
     'title': { 
     'text': 'Sales', 
     'enabled': true 
     } 
    } 
    } 
} 

export const AnychartsDemo = (props) => (
    <div style={{ margin: '0 auto' }} > 
    <AnyChart 
     width={800} 
     height={600}º 
     type='pie' 
     data={[1, 2, 3, 4]} 
     title='Simple pie chart' 
     theme='Light Blue' 
    /> 
    <hr /> 
    <AnyChart 
     type='column' 
     title='Multicolumn chart' 
     width={800} 
     height={600} 
     data={data} 
     legend 
     theme={customTheme} /> 
    <AnyChart 
     {...complexSettings} 
    /> 
    </div> 
) 

export default AnychartsDemo 

但沒有任何工程。

+0

如果您將主題更改爲:主題=「淺藍色」,該怎麼辦? – Ved

+0

@Ved nothing,我只是更新我的問題,讓你檢查組件代碼。 – Jean

+0

'anychart-ui.scss'中有什麼? –

回答

2

吉恩,

來解決這個問題,你有<AnyChart />在第一次使用前,調用anychart.theme( 'lightBlue')(重要:請使用駝峯)。 此外,您還需要包括相應的主題:

app.html

<head> 

    <script src="http://cdn.anychart.com/themes/latest/light_blue.js"></script> 
</head> 

或者你可以從CDN下載的主題:http://cdn.anychart.com/#themes

app.js

import React from 'react' 
import AnyChart from 'anychart-react' 
anychart.theme('lightBlue')