CSS 样式

优质

小牛编辑

129浏览

2023-12-01

Epoch 图表使用 css 设置填充颜色、笔画等。默认情况下，图表使用 D3分类颜色。您可以轻松地覆盖这些默认颜色或创建您自己的自定义类别。

主题

Epoch 以主题的形式安排类似于图表的样式。主题可以通过特殊的类名添加到任何HTML容器中。目前，Epoch船有两个内置主题：

epoch-theme-default-基于d3分类颜色的默认主题
epoch-theme-dark-黑色背景下使用的主题

下面是一个如何使用类名的示例，非常简单：

<body class="epoch-theme-dark">
    Charts in the body will use the dark theme...
    <div class="epoch-theme-default">Except charts here...</div>
</body>

注意：如果没有给出类名，则 Epoch 将采用默认主题。

使用分类颜色

每个主题支持四个分类颜色集：

category20(违约)
category20b
category20c
category10

只需将类添加到图表中，就可以更改图表的颜色集，如下所示：

<div id="container1" class="epoch category20"></div>
<div id="container1" class="epoch category20b"></div>
<div id="container1" class="epoch category20c"></div>
<div id="container1" class="epoch category10"></div>

我们通过向图表中需要使用分类颜色呈现的每个元素添加一个类别类来实现这一点。

创建自己的类别

这样做的首选方法是使用CSS预处理程序(如Sass或更少)，下面是一个用SCSS编写的简单配色方案的示例：

$colors: red, green, blue, pink, yellow;

.epoch.my-colors {
  @for $i from 1 through 5 {
    .category#{$i} {
      .line { stroke: nth($colors, $i); }
      .area, .dot { fill: nth($colors, $i); }
    }
    .arc.category#{$i} path {
      fill: nth($colors, $i);
    }
    .bar.category#{$i} { 
      fill: nth($colors, $i);
    }
  }
}

然后，您可以将类应用于容器，并查看实际的颜色：

<div id="myChart" class="epoch my-colors"></div>

在未来，我们将创建SCSS和更少的混合插件，您可以使用它来更容易地定义自定义颜色类别。

重写样式

对于多系列图表，数据格式允许您提供一个可选的。label每个系列。我们从这个标签创建一个“dasherized”类名，并将其与图表的呈现输出相关联。例如，以区域图的下列数据为例：

var areaChartData = [
  {
    label: "Layer 1",
    values: [ {x: 0, y: 100}, {x: 20, y: 1000} ]
  }
];

标记层Layer 1将在图表中与类名相关联。layer-1。要覆盖它的颜色，只需使用以下CSS：

#myChartContainer .layer-1 .area {
  fill: pink;
}