使用 C3 制作简单的条形图，x 轴上有单独的列答案

【问题标题】：Make simple bar chart using C3 with separate columns on the x axis使用 C3 制作简单的条形图，x 轴上有单独的列
【发布时间】：2016-01-23 18:47:10
【问题描述】：

我正在尝试使用 C3 和 D3 创建条形图，但我无法让列彼此不相关，除了它们在 Y 轴上使用相同的比例。

为了更好地解释，我添加了图片。

var chart = c3.generate({
    bindto: '#designerChart',
    data: {

      columns: [
        ['MA', 6],
        ['ME', 8],
        ['NY', 6],
        ['CN', 5],
        ['TX', 2]
      ],
      type: 'bar',

    },
    axis: {
        y: {
            max: 10,
            min: 0,
            padding: { top: 0, bottom: 0 }
        }
    }
});

生成一组条形图，当我将鼠标悬停在它们上面时，我会得到所有条形图的详细信息 - 这不是我想要的。

我可以更改数据，使其显示单独的列，但它们的颜色相同，当我想将其转换为饼图时，您无法区分状态。

var chart = c3.generate({
    bindto: '#designerChart',
    data: {
      x: 'x',
      columns: [
        ['x','MA', 'ME', 'NY', 'CN', 'TX'],
        ['rainfall', 6, 8, 6, 5, 4 ]
      ],
      type: 'bar',

    },
    axis: {
        x: {
            type: 'category'
        },
        y: {
            max: 10,
            min: 0,
            padding: { top: 0, bottom: 0 }
        }
    }
});

这就是我想要的：

【问题讨论】：

标签： javascript d3.js charts c3.js

【解决方案1】：

条形图解决方案：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>C3 Bar Chart</title>
</head>

<body>
  <div id="designerChart"></div>

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {

      columnColors = ['#9a4d6f', '#c76c47', '#f85115', '#d9b099', '#d4ba2f'];

      function setColumnBarColors(colors, chartContainer) {

        $('#' + chartContainer + ' .c3-chart-bars .c3-shape').each(function(index) {
          this.style.cssText += 'fill: ' + colors[index] + ' !important; stroke: ' + colors[index] + '; !important';
        });

        $('#' + chartContainer + ' .c3-chart-texts .c3-text').each(function(index) {
          this.style.cssText += 'fill: ' + colors[index] + ' !important;';
        });
      }

      var chart = c3.generate({
        bindto: '#designerChart',
        data: {
          columns: [
            ['rainfall', 6, 8, 6, 5, 4]
          ],
          type: 'bar'
        },
        axis: {
          x: {
            label: {
              text: 'States',
              position: 'outer-center',
            },
            type: 'category',
            categories: ['MA', 'ME', 'NY', 'CN', 'TX'],
            tick: {
              centered: true
            }
          },
          y: {
            label: {
              text: 'Rainfall (inches)',
              position: 'outer-middle'
            },
            max: 10,
            min: 0,
            padding: {
              top: 0,
              bottom: 0
            }
          }
        },
        legend: {
          show: false
        }
      });

      setColumnBarColors(columnColors, 'designerChart');

      // Color turns to original when window is resized
      // To handle that
      $(window).resize(function() {
        setColumnBarColors(columnColors, 'designerChart');
      });
    });
  </script>

</body>

</html>

在这个小提琴中颜色变成了原始颜色（整页）。但它会根据工作本地文件以及 c3、d3 和 jquery 的本地引用改变颜色。

参考资料：

setColumnBarColors 函数：
jzcor...@gmail.com https://groups.google.com/forum/
http://c3js.org/gettingstarted.html
http://c3js.org/samples/axes_x_tick_format.html
http://c3js.org/reference.html

【讨论】：