javascript - xcharts 中的颜色条形图

Question

有没有人改变了xcharts中条形图的颜色？知道怎么做吗？

朴素的藏青色好无聊:

http://tenxer.github.io/xcharts/examples/

谢谢，

菲利普

Answer 1

基于documentation该库似乎没有内置图表样式的方法，而是:

The best way to style charts is to start with the included stylesheet, or use your browser's element inspector to see each elements CSS class selectors that are available to use.

每个系列都有一个类:.color0 到 .colorN，因此您可以使用 css 设置每个矩形的属性:

var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    }
  ]
};
var myChart = new xChart('bar', data, '#chart');

.color0 rect {
  fill: orange !important;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xcharts/0.3.0/xcharts.js"> </script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/xcharts/0.3.0/xcharts.css">

<figure style="width: 400px; height: 300px;" id="chart"></figure>

或者，您可以使用 d3 选择来改变颜色:

d3.selectAll(".color0").selectAll("rect").style("fill","orange");

var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    }
  ]
};
var myChart = new xChart('bar', data, '#chart');

d3.selectAll(".color0").selectAll("rect").style("fill","orange");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xcharts/0.3.0/xcharts.js"> </script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/xcharts/0.3.0/xcharts.css">

<figure style="width: 400px; height: 300px;" id="chart"></figure>

如果您只是希望所有矩形都具有某种颜色，那么 d3.selectAll("rect").style("fill","color") 将起作用。