billboard.js

Question

我有多个条形图，每个条形图显示多个项目的单个数据值。我想让所有图表中每个项目的条形颜色保持一致。

以下是数据示例：

Items Data1 Data2 Data3 Data4 Dogs 5 50 18 27 Cats 9 33 26 30 Hamsters 5 22 8 43

图表 1 显示了狗、猫和仓鼠的数据 1 值，图表 2 显示了狗、猫和仓鼠等的数据 2 值。

我希望在所有图表中狗的栏始终为绿色，猫的栏始终为蓝色，而仓鼠的栏始终为黄色。这可能吗？

查看 billboard.js API 我看到我可以设置数据的颜色，但是这会将特定数据字段的颜色设置为在所有项目中都相同，以便在图表上显示只有 Data1 每个条的颜色相同。

我看过的其他图表库（highcharts、c3、google）似乎也有类似的限制。有没有其他方法可以解决这个问题或我忽略的问题？

Answer 1

您可以通过组合 bb.defaults() 和 data.color 选项来完成。查看代码段示例。

// set default options for whole charts.
bb.defaults({
  data: {
    x: "x",
    type: "bar",
    color: function(color, d) {
      // specify colors you need
      return ["red", "green", "blue"][d.index]
    }
  },
  axis: {
     x: {
        type: "category"
     }
  }
});


// All generated charts will be defaulted from above options.
var chart = bb.generate({
  data: {
    columns: [
  ["x", "Dogs", "Cats", "Hamsters"],
  ["data1", 5, 9, 5]
 ]
  }
});

var chart = bb.generate({
  bindto: "#chart2",
  data: {
    columns: [
  ["x", "Dogs", "Cats", "Hamsters"],
  ["data1", 50, 33, 22]
 ]
  }
});

var chart = bb.generate({
  bindto: "#chart3",
  data: {
    columns: [
  ["x", "Dogs", "Cats", "Hamsters"],
  ["data1", 18, 26, 8]
 ]
  }
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>billboard.js</title>
  <link rel="stylesheet" href="https://unpkg.com/billboard.js/dist/theme/insight.css">
  <script src="https://unpkg.com/billboard.js/dist/billboard.pkgd.min.js"></script>
<style>
  .bb {
    width: 300px;
    height: 220px;
  }
</style>
</head>
<body>
    <div id="chart"></div>
    <div id="chart2"></div>
    <div id="chart3"></div>
</body>
</html>

billboard.js - 根据标签值设置颜色，以便给定标签的数据在多个图表中保持一致的颜色

billboard.js - Set color based on label value, so that data for a given label is consistently colored across multiple charts