Question

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

朴素的深蓝色是如此无聊：

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

谢谢，

菲利普

Answer 1

基于documentation，它没有显示图书馆内置的图表样式方法，而是：

设置图表样式的最佳方法是从包含的样式表开始，或使用浏览器的元素检查器查看每个元素的CSS类可以使用的选择器。

每个系列都有一个类：.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中的彩色条形图

2 个答案: