使用资料用户界面主题属性来设计高级图表- React

Question

我一直在使用的材料ui主题的样式组件在反应。现在，我们的应用程序中有一个使用高级图表的要求。但我仍然想保留同样的主题为高图表。有没有一种方法，我们可以集成的材料UI主题风格的高图表？在我最终决定在这里提出这个问题之前，我已经在谷歌上做了很多。我知道高图表提供了他们自己的主题。但我不想让代码变得更加混乱，多个主题。有没有办法以更清洁的方式实现这一目标？任何帮助都将不胜感激。提前感谢！

Answer 1

高级图表有可能通过Highcharts.setOptions设置主题来创建适合您的方案。您可以看到，对于该材料的UI，有一些特定的图表元素集，它没有改变图表的外观。https://www.highcharts.com/docs/chart-design-and-style/themes#creating-your-own-theme

// set the theme
Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 255)']
            ]
        },
        borderWidth: 2,
        plotBackgroundColor: 'rgba(255, 255, 255, .9)',
        plotShadow: true,
        plotBorderWidth: 1
    },
    title: {
        style: {
            color: '#000',
            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    subtitle: {
        style: {
            color: '#666666',
            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    xAxis: {
        gridLineWidth: 1,
        lineColor: '#000',
        tickColor: '#000',
        labels: {
            style: {
                color: '#000',
                font: '11px Trebuchet MS, Verdana, sans-serif'
            }
        },
        title: {
            style: {
                color: '#333',
                fontWeight: 'bold',
                fontSize: '12px',
                fontFamily: 'Trebuchet MS, Verdana, sans-serif'

            }
        }
    },
    yAxis: {
        alternateGridColor: null,
        minorTickInterval: 'auto',
        lineColor: '#000',
        lineWidth: 1,
        tickWidth: 1,
        tickColor: '#000',
        labels: {
            style: {
                color: '#000',
                font: '11px Trebuchet MS, Verdana, sans-serif'
            }
        },
        title: {
            style: {
                color: '#333',
                fontWeight: 'bold',
                fontSize: '12px',
                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
            }
        }
    },
    legend: {
        itemStyle: {
            font: '9pt Trebuchet MS, Verdana, sans-serif',
            color: 'black'

        },
        itemHoverStyle: {
            color: '#039'
        },
        itemHiddenStyle: {
            color: 'gray'
        }
    },
    credits: {
        style: {
            right: '10px'
        }
    },
    labels: {
        style: {
            color: '#99b'
        }
    }
});