小编Dee*_*roy的帖子

我正在使用 Chart JS，其中我有一个极地面积图（参见图片https://imgur.com/XedmesD）我希望点标签在刻度之间居中。我找到了似乎只适用于具有 X 轴和 Y 轴的条形图的解决方案。

xAxes: [{
            gridLines: {
                offsetGridLines: true
            }
        ]} 

但这在使用极地面积图时似乎不起作用。

我的代码是

import React, { Component } from "react";
import Chart from "chart.js";

export default class OrdersFufilledChart extends Component {
  OrdersFufilledChart = React.createRef();

  componentDidMount() {
    const OrdersFufilledChart = this.OrdersFufilledChart.current.getContext(
      "2d"
    );

    new Chart(OrdersFufilledChart, {
      type: "polarArea",
        data: {
            datasets: [
                {
                    data: [342, 323, 333, 352, 361, 299, 272, 423, 425, 400, 382, 363],
                    backgroundColor: ["#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#57C5C8", "#ff0931", "#ff0931","#57C5C8","#57C5C8","#57C5C8","#57C5C8","#57C5C8"],
                    borderWidth: …

我有一个导航栏，当用户将鼠标悬停在链接上时，它会为下划线设置动画。我正在尝试添加 css，以便活动导航栏具有永久下划线。

我的代码

<Navbar className="navbar-expand-sm navbar-toggleable-sm" light>
                <Container id="ContainerGrnH">
            <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
                    <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
            <div class="topnav">
              <ul className="navbar-nav flex-grow">
                <NavItem>
                  <NavLink tag={Link} className="text-white"  to="/home">HOME <div className="underline"></div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink tag={Link} className="text-white" to="/people-profiles">PEOPLE PROFILES<div className="underline"></div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink tag={Link} className="text-white" to="/Role-types">ROLE TYPES<div className="underline"></div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink tag={Link} className="text-white" to="/support">SUPPORT<div className="underline"></div></NavLink>
                </NavItem>
                <NavItem>
                    <NavLink tag={Link} className="text-white" id="contactushead" to="/contact-us">CONTACT US<div className="underline"></div></NavLink>
                </NavItem>
                </ul>
                </div>
            </Collapse>
          </Container>
            </Navbar> 

.topnav ul a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px;
    transition: color …