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.

每个系列都有一个 class：.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") 就可以了。

Answer 2

在 Xchart 中，我们可以使用 seriesColors 方法添加条形颜色。

CategoryChart chart = new CategoryChartBuilder()
            .yAxisTitle("ABC Title")
            .theme(Styler.ChartTheme.GGPlot2).build();

    chart.getStyler().setSeriesColors(new Color[]{Color.blue, Color.cyan, Color.LIGHT_GRAY, new Color(224,43,54), new Color(24,43,124)});

xcharts 中的颜色条形图

Color Bar Graph in xcharts

javascript

d3.js

xcharts