Вертикальная сгруппированная гистограмма динамических столбцов, использующих реагирование - PullRequest
Новая
       11

Вертикальная сгруппированная гистограмма динамических столбцов, использующих реагирование

0 голосов
/ 16 января 2019

вертикальная сгруппированная гистограмма динамических столбцов с использованием response-vis

вывод с использованием реагирующей вертикальной полосы

enter image description here

Ожидаемый результат

enter image description here

<XYPlot
                        xType={chartData['type']}
                        width={width}
                        height={height}>
                        <VerticalGridLines style={gridLineStyle} />
                        <HorizontalGridLines style={gridLineStyle} />
                        <XAxis tickLabelAngle={xAxisAngle} style={tickStyle} tickFormat={chartData['type'] == 'linear' ? tick => this.formatNumber(tick) : null} />
                        <YAxis tickLabelAngle={yAxisAngle} style={tickStyle} tickFormat={tick => this.formatNumber(tick)} />
                        <ChartLabel
                            text={chartData['name']}
                            className="alt-x-label"
                            includeMargin={false}
                            xPercent={0.5}
                            yPercent={1.18}
                            style={{
                                fontWeight: 'bold',
                                textAnchor: 'middle',
                                fontSize: "12px",
                                fill: "#6b6b76",
                                fontFamily: "sans-serif"
                            }}
                        />
                        <ChartLabel
                            text={'No. of variants'}
                            className="alt-y-label"
                            includeMargin={false}
                            xPercent={-0.02}
                            yPercent={0.5}
                            style={{
                                transform: 'rotate(-90)',
                                fontWeight: 'bold',
                                textAnchor: 'middle',
                                fontSize: "12px",
                                fill: "#6b6b76",
                                fontFamily: "sans-serif"
                            }}
                        />
                        {hoveredNode && (
                            <Hint value={hoveredNode}>
                                <div style={{ background: '#000000' }}>
                                    <p style={{ fontSize: "10px", padding: "3px", color: '#ffffff' }}>{`${hoveredNode.y} variants with ${chartData['name']} of ${hoveredNode.x}`}</p>
                                </div>
                            </Hint>
                        )}
                        <BarSeries data={A} />
                        <BarSeries data={C} />
                        <BarSeries data={G} />
                        <BarSeries data={T} />
                    </XYPlot>

Я получаю три 3 бара, но всегда есть один четвертый пустой бар. Который не нужен. Любое предложение будет полезно. Спасибо

...