Javascript amcharts中文本重叠时的偏移辅助线标签
我想在我的amcharts图表中加入一些指南，我发现了一些非常描述性的例子。然而，我正在努力定位标签文本，尤其是当辅助线太近以至于标签重叠时 下面是示例代码 HTML:Javascript amcharts中文本重叠时的偏移辅助线标签,javascript,html,css,amcharts,Javascript,Html,Css,Amcharts,我想在我的amcharts图表中加入一些指南，我发现了一些非常描述性的例子。然而，我正在努力定位标签文本，尤其是当辅助线太近以至于标签重叠时 下面是示例代码 HTML: Javascript: var chartData = weekendGuides = []; generateChartData(); function generateChartData() { var firstDate = new Date(); firstDate.setDate( firstDa
var chartData = weekendGuides = [];
generateChartData();
function generateChartData() {
var firstDate = new Date();
firstDate.setDate( firstDate.getDate() - 200 );
firstDate.setHours( 0, 0, 0, 0 );
for ( var i = 0; i < 200; i++ ) {
var newDate = new Date( firstDate );
newDate.setDate( newDate.getDate() + i );
var a1 = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
var b1 = Math.round( Math.random() * ( 1000 + i ) ) + 500 + i * 2;
chartData.push( {
"date": newDate,
"value": a1,
"volume": b1
} );
// add weekend guide
if ( 6 == newDate.getDay() ) {
var toDate = new Date( newDate );
toDate.setDate( newDate.getDate() + 2 );
weekendGuides.push( {
"date": newDate,
"toDate": toDate,
"lineAlpha": 0,
"fillAlpha": 0.05,
"fillColor": "#000",
"expand": true
} );
}
}
}
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"dataSets": [ {
"title": "first data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData,
"categoryField": "date"
} ],
"panels": [ {
"showCategoryAxis": false,
"title": "Value",
"percentHeight": 70,
"stockGraphs": [ {
"id": "g1",
"valueField": "value",
"comparable": true,
"compareField": "value",
"balloonText": "[[title]]:<b>[[value]]</b>",
"compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
} ],
"stockLegend": {
"periodValueTextComparing": "[[percents.value.close]]%",
"periodValueTextRegular": "[[value.close]]"
},
"categoryAxis": {
"guides": weekendGuides
},
"valueAxes": [ {
"guides": [ {
"value": 325,
"lineAlpha": 0.8,
"lineColor": "#0c0",
"label": "Guide #1",
"position": "right"
}, {
"value": 322,
"lineAlpha": 0.8,
"lineColor": "#0c0",
"label": "Guide #2",
"position": "right"
}]
} ]
} ],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true,
"fullWidth": true,
"cursorAlpha": 0.1
},
"periodSelector": {
"position": "bottom",
"periods": [ {
"period": "MM",
"selected": true,
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
} ]
}
} );
var chartData=weekendGuides=[]；
generateChartData（）；
函数generateChartData（）{
var firstDate=新日期（）；
firstDate.setDate（firstDate.getDate（）-200）；
firstDate.setHours（0,0,0,0）；
对于（变量i=0；i<200；i++）{
var newDate=新日期（firstDate）；
newDate.setDate（newDate.getDate（）+i）；
var a1=Math.round（Math.random（）*（40+i））+100+i；
var b1=Math.round（Math.random（）*（1000+i））+500+i*2；
chartData.push（{
“日期”：newDate，
“价值”：a1，
“卷”：b1
} );
//添加周末指南
如果（6==newDate.getDay（））{
var toDate=新日期（newDate）；
toDate.setDate（newDate.getDate（）+2）；
周指南.推送（{
“日期”：newDate，
“toDate”：toDate，
“lineAlpha”：0，
“fillAlpha”：0.05，
“fillColor”：“000”，
“扩展”：正确
} );
}
}
}
var chart=AmCharts.makeChart（“chartdiv”{
“类型”：“库存”，
“数据集”：[{
“标题”：“第一个数据集”，
“字段映射”：[{
“fromField”：“value”，
“托菲尔德”：“价值”
}, {
“fromField”：“volume”，
“toField”：“卷”
} ],
“数据提供者”：图表数据，
“类别字段”：“日期”
} ],
“专家组”：[{
“showCategoryAxis”：错误，
“标题”：“价值”，
“百分高度”：70，
“股票图表”：[{
“id”：“g1”，
“valueField”：“value”，
“可比”：正确，
“比较字段”：“值”，
“文本”：“[[title]]：[[value]]”，
“CompareGraphBallodText:”[[title]]：[[value]]
} ],
“股票传奇”：{
“periodValueTextComparing”：“[[percents.value.close]]%”，
“periodValueTextRegular”：“[[value.close]]”
},
“分类法”：{
“指南”：周末指南
},
“valueAxes”：[{
“指南”：[{
“价值”：325，
“lineAlpha”：0.8，
“线条颜色”：“0c0”，
“标签”：“指南#1”，
“位置”：“正确”
}, {
“价值”：322，
“lineAlpha”：0.8，
“线条颜色”：“0c0”，
“标签”：“指南#2”，
“位置”：“正确”
}]
} ]
} ],
“图表滚动条设置”：{
“图形”：“g1”
},
“图表光标设置”：{
“ValueBallodesEnabled”：正确，
“全宽”：正确，
“cursorAlpha”：0.1
},
“周期选择器”：{
“位置”：“底部”，
“期间”：[{
“期间”：“MM”，
“选定”：正确，
“计数”：1，
“标签”：“1个月”
}, {
“期间”：“YYYY”，
“计数”：1，
“标签”：“1年”
}, {
“期间”：“年初至今”，
“标签”：“年初至今”
}, {
“期间”：“最大值”，
“标签”：“最大值”
} ]
}
} );
知道如何在标签重叠的情况下将标签文本推到指南的指南下方吗。可能是使用CSS代码作为类名amcharts指南-[id] 没有办法通过指南属性来实现这一点，但您对css类名有正确的直觉。设置为
true.amcharts guide-[id]tspanquerySelectorAmCharts.makeChart("chartdiv", {
"addClassNames": true,
// ...
"stockPanels": [{
"valueAxes": [{
"guides": [{
"id": "guide-1",
// ..
}, {
"id": "guide-2",
// ..
}]
}],
"listeners": [{
"event": "drawn",
"method": function() {
var guide2Text = document.querySelector('.amcharts-guide-guide-2 tspan');
if (guide2Text) {
guide2Text.setAttribute('y', 20);
}
}
}]
}],
// ..
});
谢谢你帮了我的忙。我刚刚更改了guide2Text.setAttribute（'y'，20）；到guide2Text.setAttribute（'x'，20）；因为我有垂直导轨。如果有多个辅助线重叠，会发生什么情况。我只需将侦听器增加一倍，并将querySelector改编为第二个.amcharts guide-[id]span，或者有其他方法吗？您不需要添加其他侦听器。只需为同一侦听器中重叠的每个指南添加额外的querySelector调用。如果每个向导重叠，您可能需要考虑通过向导循环并错开X值，以使它们各自进行不同的调整或调整其他标签。
AmCharts.makeChart("chartdiv", {
"addClassNames": true,
// ...
"stockPanels": [{
"valueAxes": [{
"guides": [{
"id": "guide-1",
// ..
}, {
"id": "guide-2",
// ..
}]
}],
"listeners": [{
"event": "drawn",
"method": function() {
var guide2Text = document.querySelector('.amcharts-guide-guide-2 tspan');
if (guide2Text) {
guide2Text.setAttribute('y', 20);
}
}
}]
}],
// ..
});