2017-11-23 12 views
1

Billboard.js(d3 v4 +に基づくチャートライブラリ)でグラフを作成しました。破線は、NULL値をグラフの0に変換します。

私の目的は、ラインを破線で表示することでしたので、私は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の行があります。

これは私のチャートがどのように見えるかを示しています。値がその部分ではヌルであるため、行にしないでください。

enter image description here

その行の値を含む配列は、このいずれかになります。

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 

あなたがここでの問題何を知っていますか?

+0

にconsole.log(領域)は何と言っていますか?そして、コードをcodepenに置くことができますか? https://codepen.io/anon/pen/wPjYVx?editors=1010 –

+0

https://codepen.io/anon/pen/JOveYb?editors=1010こちらがうまく見えますが、私は質問を更新します詳細情報 –

答えて

1

ラインの特定の領域を破線で設定する必要がない場合は、css stroke-dasharray属性を実装する方が簡単です。

以下のスニペットをチェックしてください。

bb.generate({ 
 
    data: { 
 
    columns: [ 
 
\t  ["data1", 100, 200, 1000, 900, 500], 
 
\t  ["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>

関連する問題