在 C3.js

问题描述

我怎样才能实现这个网格和标签颜色。我可以找到一些关于标签颜色的答案，但没有将网格颜色更改为屏幕截图中显示的颜色，而不是默认的黑色。

以防万一您需要我的工作代码：

var chart = c3.generate({
    bindto: '#chart',data: {
      x: 'x',columns: [
        ['x',...xAxis],['total',...yAxis],],type: 'bar',colors: {
        total: d3.rgb(40,162,245)
      },empty: { label: { text: "No Data Available" }}
    },axis: {
      x: {
        tick: {
          culling: {
            max: 31,},y: {
        tick: {
          format: (x) => x / 1000 + 'k',grid: {
      y: {
        show: true,color: '#fff'
      },})

解决方法

尝试对行使用选择器 .c3 path,.c3 line:not([stroke-width="10"])，对文本使用选择器 tspan。

.c3 line[stroke-width="10"] 用于图例方块，需要排除。

另见How to get rounded corner in c3js bar charts

const  xAxis = [10,20,40];
const  yAxis = [2000,1420,1000];

var chart = c3.generate({
bindto: '#chart',data: {
  x: 'x',columns: [
    ['x',...xAxis],['total',...yAxis],],type: 'bar',colors: {
    total: d3.rgb(40,162,245)
  },empty: { label: { text: "No Data Available" }}
},axis: {
  x: {
    tick: {
      culling: {
        max: 31,},y: {
    tick: {
      format: (x) => x / 1000 + 'k',grid: {
  y: {
    show: true,color: '#fff'
  },})

.c3 path,.c3 line:not([stroke-width="10"]) {
  stroke: gold !important;
}

tspan {
  stroke: green !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js" integrity="sha512-FHsFVKQ/T1KWJDGSbrUhTJyS1ph3eRrxI228ND0EGaEp6v4a/vGwPWd3Dtd/+9cI7ccofZvl/wulICEurHN1pg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js" integrity="sha512-+IpCthlNahOuERYUSnKFjzjdKXIbJ/7Dd6xvUp+7bEw0Jp2dg6tluyxLs+zq9BMzZgrLv8886T4cBSqnKiVgUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" integrity="sha512-cznfNokevSG7QPA5dZepud8taylLdvgr0lDqw/FEZIhluFsSwyvS81CMnRdrNSKwbsmc43LtRd2/WMQV+Z85AQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div id="chart">