Anychart реагировать установить тему

В настоящее время я использую плагин Anycharts react для создания демо, но Я не могу понять, как изменить тему по умолчанию. У любого тела есть идея.

Я старался:

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

Но ничего не работает.


person Jean    schedule 19.04.2017    source источник
comment
что произойдет, если вы измените тему на: theme=Light Blue?   -  person Ved    schedule 19.04.2017
comment
@Ved ничего, я просто обновляю свой вопрос, чтобы вы могли проверить код компонента.   -  person Jean    schedule 19.04.2017
comment
Что находится в anychart-ui.scss?   -  person Anthony Kong    schedule 19.04.2017
comment
@AnthonyKong — это css для отображения контекстного меню, меню с диаграммой сохранения как, сохранением данных как...   -  person Jean    schedule 19.04.2017


Ответы (1)


Жан,

чтобы решить эту проблему, вы должны вызвать anychart.theme('lightBlue') до первого использования <AnyChart /> (важно: используйте camelCase). Кроме того, вам необходимо включить соответствующую тему:

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')
person AnyChart Support    schedule 20.04.2017