react native中条形图上的不同颜色

Question

嗨，我想在我的react原生应用程序中创建一个矩形条形图。如下图所示

​

​

我使用了react-native-chart-kit，但它只有一种颜色配置。我通过谷歌搜索其他购物车，但没有找到正确的，以满足参考图像。有没有对我有帮助的条形图库的例子？

Answer 1

请原谅我的代码格式，我在Stackoverflow中的导航方式。

这是一个我以前用过的代码例子，改变填充和颜色也是你的事。

/* App.js */
var React = require('react');
var Component = React.Component;
var CanvasJSReact = require('./canvasjs.react');
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class App extends Component {
    constructor() {
        super();
        this.toggleDataSeries = this.toggleDataSeries.bind(this);
    }
    toggleDataSeries(e){
        if (typeof(e.dataSeries.visible) === "undefined" || e.dazaSeries.visible) {
            e.dataSeries.visible = false;
        }
        else{
            e.dataSeries.visible = true;
        }
        this.chart.render();
    }
    render() {
        const options = {
            animationEnabled: true,
            title:{
                text: "All Time Summer Olympic Medals"
            },
            legend: {
                verticalAlign: "center",
                horizontalAlign: "right",
                reversed: true,
                cursor: "pointer",
                fontSize: 16,
                itemclick: this.toggleDataSeries
            },
            toolTip: {
                shared: true
            },
            data: [
            {
                type: "stackedColumn100",
                name: "Gold",
                showInLegend: true,
                color: "#D4AF37",
                dataPoints: [
                    { label: "United States", y:1118},
                    { label: "Soviet Union", y:473},
                    { label: "Great Britain", y:273},
                    { label: "France", y:243},
                    { label: "Germany", y:269},
                    { label: "Italy", y:243},
                    { label: "Sweden", y:195},
                    { label: "China", y:236},
                    { label: "Russia", y:194},
                    { label: "East Germany", y:192}
                ]
            },
            {
                type: "stackedColumn100",
                name: "Silver",
                showInLegend: true,
                color: "#C0C0C0",
                dataPoints: [
                    { label: "United States",   y: 897},
                    { label: "Soviet Union", y: 376},
                    { label: "Great Britain", y: 299},
                    { label: "France", y: 272},
                    { label: "Germany", y: 272},
                    { label: "Italy",   y: 212},
                    { label: "Sweden", y: 210},
                    { label: "China",   y: 189},
                    { label: "Russia", y: 156},
                    { label: "East Germany", y: 165}
                ]
            },
            {
                type: "stackedColumn100",
                name: "Bronze",
                showInLegend: true,
                color: "#CD7F32",
                dataPoints: [
                    { label: "United States", y: 789},
                    { label: "Soviet Union", y: 355},
                    { label: "Great Britain", y: 303},
                    { label: "France", y: 310},
                    { label: "Germany", y: 283},
                    { label: "Italy", y: 236},
                    { label: "Sweden", y: 233},
                    { label: "China", y: 174},
                    { label: "Russia", y: 187},
                    { label: "East Germany", y: 162}
                ]
            }
            ]
        }
        return (
        <div>
            <CanvasJSChart options = {options}
                 onRef={ref => this.chart = ref}
            />
            {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
        </div>
        );
    }
}
module.exports = App;