Question

我使用Billboard.js创建了一个图表（基于d3 v4 +的图表库）。

我的目标是让线条看起来破碎，所以我使用了this documentation。

基本上，我添加了这段代码：

const regions = {}
for(const item of baselineTitle) {
    regions[item]=[];
    regions[item].push({"style" : "dashed"});
}

在bb.generate内：

var chart = bb.generate({
    "data": {
        "type": "spline",
        "x": "x",
        "columns": columns,
        "regions": regions
    },
 ...

当线条没有虚线时，一切都很好。我在图表上没有空值的行。

当它为虚线时，对于所有空值，它都有一条零线。

这就是我的图表的样子，我将黄色放在不应该是一条线的位置，因为该部分的值为空。

包含该行值的数组是这一个：

0:"char id"
1:null
2:null
3:null
4:2230.181884765625
5:2230.181884765625
6:2230.181884765625
7:2230.181884765625
8:2230.181884765625
9:2230.181884765625
10:2230.181884765625
11:2230.181884765625
12:2230.181884765625
13:2230.181884765625
14:2230.181884765625
15:2230.181884765625
16:4568.82470703125
17:4870.001953125
18:4671.97607421875
19:4767.93603515625
20:4729.97607421875
21:4721.1591796875
22:4799.16357421875
23:4864.5068359375
24:3512.424072265625
25:2924.76513671875
26:3047.808837890625
27:3052.245361328125
28:3045.63427734375
29:2930.223388671875
30:2410.9541015625
31:2116.904052734375
32:2064.01806640625
33:2159.795654296875
34:2232.72412109375
35:2669.738037109375
36:3420.1669921875
37:4515.5537109375
38:4703.1435546875
39:4993.89501953125
40:5207.1259765625
41:5056.1904296875
42:5222.80517578125
43:5509.8447265625
44:5453.8798828125
45:5206.78466796875
46:5155.16748046875
47:5082.36083984375
48:4002.560302734375
49:3587.09716796875
50:3569.875732421875
51:3328.478515625
52:3167.501953125
53:2847.85009765625
54:2208.728759765625
55:2152.306396484375
56:2085.06640625
57:2145.009521484375
58:2170.032958984375
59:2666.60107421875
60:3379.564208984375
61:4388.9384765625
62:4549.611328125
63:5117.0029296875
64:5279.7353515625
65:5314.0751953125
66:5404.16552734375
67:5757.20068359375
68:5631.9619140625
69:5716.732421875
70:5763.24560546875
71:5598.005859375
72:null
73:null
74:null
75:null
76:null
77:null
78:null
79:null
80:null
81:null
82:null
83:null
84:null
85:null
86:null
87:null
88:null
89:null
90:null
91:null
92:null
93:null
94:null
95:null
96:null
97:null
98:null
99:null

你知道这里有什么问题吗？

Answer 1

如果您不需要将该行的特定区域设置为虚线，则使用css stroke-dasharray属性将更容易实现。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

查看以下代码段。

bb.generate({
  data: {
    columns: [
	    ["data1", 100, 200, 1000, 900, 500],
	    ["data2", 20, 40, null, 300, 200]
    ], 
    type: "spline"
  },
  point: {
    show: false
  }
});

.bb-lines-data2 {
  stroke-dasharray: 2 4;
  stroke-width: 2px;
}

<!doctype html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
</head>
<body>
  <div id="chart"></div>
</body>
</html>

虚线在图表上将空值转换为零

1 个答案: