使用billboard.js创建样条图时,如果数据系列有一些足够陡峭的"值,创建的图表将切断一些行。它将始终显示图表中的所有点,但不会显示所有连接样条线。
设置顶部/底部填充将为线条提供一些额外的空间,但这不够可靠。
我想知道是否有办法确保所有线条都在样条图表的可见区域内。
options = {
data: {
columns: [
["data1", -30, 255, 255, -50, -30, 255, 255, -50, -30, 255, 255, -50, 150, 250, 240, 20, 150, 250],
["data2", 130, 100, 140, 35, 110, 50, 130, 100, 140, 35, 110, 50, 130, 100, 140, 35, 110, 50]
],
type: "spline",
},
size: {
height: 240,
width: 480,
},
};
withpadding= {
y: {
padding: {
top:50,
},
},
};
options.bindto = "#chart";
bb.generate(options);
options.bindto = "#chart2";
options.axis = withpadding;
bb.generate(options);

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
<div id="chart"></div>
<div id="chart2"></div>
&#13;
答案 0 :(得分:1)
您可以使用clipPath选项。只需设置string url = "http://stopbyte.com"; // Just a sample url
WebClient wc = new WebClient();
wc.QueryString.Add("parameter1", "Hello world");
wc.QueryString.Add("parameter2", "www.stopbyte.com");
wc.QueryString.Add("parameter3", "parameter 3 value.");
var data = wc.UploadValues(url, "POST", wc.QueryString);
// data here is optional, in case we recieve any string data back from the POST request.
var responseString = UnicodeEncoding.UTF8.GetString(data);
。
clipPath=false
&#13;
bb.generate({
data: {
columns: [
["data1", -30, 255, 255, -50, -30, 255, 255, -50, -30, 255, 255, -50, 150, 250, 240, 20, 150, 250],
["data2", 130, 100, 140, 35, 110, 50, 130, 100, 140, 35, 110, 50, 130, 100, 140, 35, 110, 50]
],
type: "spline",
},
size: {
height: 240,
width: 480,
},
clipPath: false
});
&#13;