Anychart react set theme

Ich benutze derzeit die anycharts react plugin, um eine Demo zu erstellen, aber ich kann nicht herausfinden, wie man das Standardthema ändert. Hat irgendjemand eine Idee?Anychart react set theme

Ich habe versucht:

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

Aber nichts funktioniert.

Quelle

2017-04-19 Jean

was passiert, wenn Sie das Thema wechseln zu: theme = "Light Blue"? – Ved

@Ved nichts, ich aktualisiere nur meine Frage, damit Sie den Komponentencode überprüfen können. – Jean

Was ist in 'anychart-ui.scss'? –

Jean,

dieses Problem zu lösen, haben Sie anychart.theme ('HELL') vor der ersten Nutzung von <AnyChart /> zu nennen (wichtig: bitte benutzen Sie den Camelcase). Außerdem müssen Sie das entsprechende Thema umfassen:

app.html

<head> 

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

Oder Sie können das Thema von CDN herunterladen: http://cdn.anychart.com/#themes

app.js

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

Quelle

2017-04-20 17:54:35

Anychart react set theme

Antwort

Verwandte Themen