Anychart React 设置主题

Question

我目前正在使用 anycharts react plugin 创建演示，但我不知道如何更改默认主题。有没有人有想法。

我试过了：

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

但是没有任何效果。

Answer 1

珍，

要解决此问题，您必须在首次使用 <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')

Anychart React 设置主题

Anychart react set a theme

reactjs

anychart