1

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

纯海军蓝太无聊了：

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

谢谢，

菲利普

4

2 回答 2

1

根据文档，该库似乎没有内置用于设置图表样式的方法，而是：

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

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

于 2017-07-26T22:04:50.717 回答
0

在 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)});
于 2020-06-16T11:15:57.523 回答