Цветная гистограмма в xcharts

Question

Цветная гистограмма в xcharts

1

Кто-нибудь изменил цвета гистограммы в xcharts? Есть идеи, как это сделать?

Обычный синий синий цвет настолько скучен:

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

Спасибо,

Филипп

Philip Tenn 26 июль 2017, в 23:32

Источник

Теги:

javascript

d3.js

xcharts

1 ответ

Ещё вопросы

Andrew Reid · Accepted Answer · 2017-07-26T20-09-00.000Z

На основе документации он не появляется, библиотека имеет встроенные методы моделирования диаграммы, а скорее:

Лучший способ создания диаграмм - начать с включенной таблицы стилей или использовать инспектор элементов браузера, чтобы увидеть все элементы селектора классов элементов, которые доступны для использования.

Каждая серия имеет класс: .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") будет работать.