我有一个使用 d3plus 创建的线图,我需要有多个带有形状标签的线注释(一个水平线和两个垂直线)来识别它们。我能够让线条正确显示,但我无法让多个标签显示在图表上。
这是我的一组数据:
[
{"id":"line","myDate":"Sep 2011","value":8303269},
{"id":"line","myDate":"Jul 2012","value":8389066},
{"id":"line","myDate":"Sep 2012","value":8632844},
{"id":"line","myDate":"Mar 2013","value":8926414},
{"id":"line","myDate":"Jun 2013","value":9169985},
{"id":"line","myDate":"Mar 2014","value":9273689},
{"id":"line","myDate":"Sep 2014","value":9343712},
{"id":"line","myDate":"Dec 2014","value":9416974},
{"id":"line","myDate":"May 2015","value":9546380},
{"id":"line","myDate":"Sep 2015","value":10484320},
{"id":"line","myDate":"Sep 2015","value":11455165},
{"id":"line","myDate":"Dec 2015","value":11997581},
{"id":"line","myDate":"Apr 2016","value":12104931},
{"id":"line","myDate":"May 2016","value":12111915},
{"id":"line","myDate":"Jun 2016","value":12127119},
{"id":"line","myDate":"Jul 2016","value":12800226},
{"id":"line","myDate":"Mar 2017","value":12915303},
{"id":"line","myDate":"Nov 2017","value":12947360},
{"id":"line","myDate":"Nov 2018","value":12957309}
]
这是我的 LinePlot注释数组。
new LinePlot()
.select("#demo")
.height(500)
.config({
data: vm.plotData,
x: 'myDate',
y: 'value',
groupBy: 'id',
annotations: [
{
data: [
{id: "start", x: "Jul 2012", y: 8000000},
{id: "start", x: "Jul 2012", y: 20000000},
{id: "end", x: "Nov 2017", y: 8000000},
{id: "end", x: "Nov 2017", y: 20000000},
{id: "dotted", x: "Sep 2011", y: this.item.ceilingValue},
{id: "dotted", x: "Nov 2018", y: this.item.ceilingValue}
],
shape: "Line",
stroke: function(d) {
return d.id === "box" ? "blue" : "green";
},
strokeDasharray: "10",
strokeWidth: 2
},
{
data: [
{
x: 'Jul 2012',
y: 20000000,
width: 100,
height: 25
}
],
fill: "#0c1971",
label: "Start Date",
labelConfig: {
textAnchor: "middle",
verticalAlign: "middle"
},
shape: "Rect"
},
{
data: [
{
x: 'Nov 2017',
y: 20000000,
width: 10,
height: 25
}
],
fill: "#255832",
label: "End Date",
labelConfig: {
textAnchor: "middle",
verticalAlign: "middle"
},
shape: "Rect"
}
]
})
.render()
发生的情况是,当我刚刚拥有该Start Date
项目时,它工作正常,但是当我添加该End Date
对象时,第一个消失了,第二个没有完全呈现。
根据文档,annotations
接受
Shape 类的自定义配置对象,单个配置对象或配置对象数组。`,
这是我提供的,所以我不确定问题出在哪里。我需要更改什么才能让我的所有标签正确显示?