我已经实现了大量的代码来显示高图
以下是完整代码
我的JS代码
const getBenchmarkChartSettings = (model, isEpd) => {
let isStrScore = model.isStrScore;
let metricSeries = reorderMetricSeries(model.series.metricSeries);
let generatedSeries = model.series.generatedSeries;
let benchmarkSeries = model.series.benchmarkSeries;
let pitSeries = getPitSeries(model);
_.forEach(metricSeries, s => { s.color = s.prop ? propColor : metricColor; });
_.forEach(generatedSeries, s => { s.color = genColor; });
_.forEach(benchmarkSeries, (s, i) => {
s.color = colors[i];
s.type = 'spline';
if (s.benchmarkLegend && s.benchmarkType) {
s.name = s.benchmarkLegend;
}
_.forEach(s.data, d => {
d.x = new Date(d.dataDate).getTime();
d.y = isStrScore ? defaultscores.indexOf(d.value) : parseFloat(d.value);
});
});
_.forEach(metricSeries, e => { e.minPointLength = 6; e.type = 'column'; });
_.forEach(generatedSeries, e => { e.minPointLength = 6; e.type = 'column'; });
let seriesRaw = _.union(metricSeries, generatedSeries, benchmarkSeries, pitSeries);
let series = _.filter(seriesRaw, { 'errorMessage': null });
let shiftedSeries = _.map(series, ser => _.assign({}, ser, {
data: _.map(ser.data, d => _.assign({}, d, { x: d.x }))
}));
let allDefaultScore = isStrScore && _(shiftedSeries).flatMap('data').flatMap('value').value()
.every(val => val === 'd');
_.forEach(shiftedSeries, e => {
// allow for series longer than 1000 elements
e.turboThreshold = 0;
_.forEach(e.data, d => {
if (!d.isPit) {
d.x = new Date(d.dataDate).getTime();
d.y = isStrScore ?
(allDefaultScore ? defaultCompanyScores.indexOf(d.value) : defaultscores.indexOf(d.value))
: parseFloat(d.value);
}
});
});
const getShiftedSeries = (shiftedSeries, date) => {
let maxYear = new Date(date).getFullYear();
let updatedShiftedSeries = _.map(shiftedSeries, o => {
if (!o.isPit) {
let sdata = o.data.filter(itm => new Date(itm.x).getFullYear() >= maxYear);
o.data = sdata;
if (sdata.length > 0) { return o; }
return null;
}
return o;
});
updatedShiftedSeries = _.without(updatedShiftedSeries, undefined || null);
return updatedShiftedSeries;
};
let maxDate = _.chain(shiftedSeries)
.map(o => _.maxBy(o.data, 'x'))
.filter(e => e !== undefined)
.map('x')
.max()
.value();
if (pitSeries) {
let pitAdjSeries = _.filter(shiftedSeries, { 'isPit': true });
pitAdjSeries[0].data[0].x = maxDate;
}
let minDate = _.chain(shiftedSeries)
.map(o => _.minBy(o.data, 'x'))
.filter(e => e !== undefined)
.map('x')
.min()
.value();
let dateBuffer = ((maxDate - minDate) * 0.1);
shiftedSeries = getShiftedSeries(shiftedSeries, minDate);
let hasOnlyFewStatements = _.filter(shiftedSeries, e =>
(e.name.indexOf('CIQ Data') > -1 || e.name.indexOf('Prop Data') > -1))
.reduce((dataPoints, { data }) => dataPoints.concat(data), [])
.length < 3;
let chartSettings = {
chart: {
width: 220,
height: 135,
spacingLeft: 0,
marginLeft: !isStrScore ? 25 : 12,
marginRight: 1,
backgroundColor: isEpd ? '#f2f2f2' : 'transparent',
plotBorderColor: '#9A9A9A',
plotBorderWidth: 1
},
title: {
text: null
},
credits: {
enabled: false
},
legend: {
align: 'left',
layout: 'horizontal',
verticalAlign: 'top',
alignColumns: false,
itemDistance: 0,
symbolHeight: 10,
symbolWidth: 6,
padding: 0,
width: 200,
symbolRadius: 0,
margin: 7,
itemMarginTop: 2,
itemStyle: {
fontSize: '4px'
},
y: -5,
x: !isStrScore ? 25 : 10
},
xAxis: [
{
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%b-%d-%Y',
second: '%b-%d-%Y',
minute: '%b-%d-%Y',
hour: '%b-%d-%Y',
day: '%b-%Y',
week: '%b-%Y',
month: '%b-%d-%Y',
year: '%Y'
},
labels: {
rotation: 0,
style: {
fontSize: '4px',
color: '#000'
},
y: 7,
x: isEpd ? -5 : !isStrScore ? 0 : (hasOnlyFewStatements ? 0 : -10)
},
min: minDate - dateBuffer,
max: maxDate + dateBuffer,
marginRight: 10,
gridLineColor: 'white',
gridLineWidth: 1,
lineWidth: 0.5,
minorGridLineWidth: 0,
lineColor: '#808080',
minorTickLength: 0,
tickLength: 0,
tickInterval: isEpd ? (364 * 24 * 60 * 60000) : (maxDate - minDate) > 32000000000 ? undefined :
(hasOnlyFewStatements ? undefined : 8000000000),
align: 'left'
}
],
yAxis: [
{
gridLineWidth: 0,
lineWidth: 0.5,
lineColor: '#808080',
minRange: 0,
min: 0,
ceiling: 100,
tickAmount: isStrScore ? undefined : 5,
labels: {
style: {
fontSize: '4px',
color: 'black'
},
x: -2,
y: isStrScore ? 7 : 3
},
title: {
text: !isStrScore ? '(PD%)' : '',
align: 'middle',
margin: 0,
x: -2,
rotation: -90,
ceiling: 100,
style: {
fontSize: '5px',
color: 'black'
},
labels: {
style: {
fontWeight: 'bold',
color: 'black',
fontSize: '2px'
},
x: -3
}
}
}
],
plotOptions: {
column: {
maxPointWidth: 10
},
series: {
states: {
hover: {
enabled: false
},
inactive: {
opacity: 1
}
},
enableMouseTracking: false,
borderWidth: 1,
borderColor: '#FFFFFF',
threshold: 0,
lineWidth: 1.5,
marker: {
enabled: false
},
minPointLength: 10,
dataLabels: {
enabled: true,
style: {
fontSize: '4px',
color: 'black',
textOutline: false
},
y: isLabelAdjustmentRequired(metricSeries, benchmarkSeries) ? -2 : undefined
}
}
},
series: shiftedSeries?.map(item => ({
...item,
data: item?.data.sort((a, b) => new Date(a.dataDate || null) - new Date(b.dataDate || null))
})) || []
};
if (isStrScore) {
chartSettings.yAxis[0].tickInterval = 4;
}
_.forEach(chartSettings.series, e => {
if (e.type === 'column' || e.isPit) {
e.dataLabels = {
padding: 1,
allowOverlap:true,
format: '<span style=\'font-size:4px;\'>{point.formattedValue}</span>' };
}
else if (e.type === 'spline') {
e.dataLabels = { enabled: false };
}
});
return chartSettings;
}
下面是代码,使用此代码 higchart 在图表上显示重叠的值
_.forEach(chartSettings.series, e => {
if (e.type === 'column' || e.isPit) {
e.dataLabels = {
padding: 1,
allowOverlap:true,
format: '<span style=\'font-size:4px;\'>{point.formattedValue}</span>' };
}
else if (e.type === 'spline') {
e.dataLabels = { enabled: false };
}
});
如何管理图表下显示的值正确显示,我尝试过执行allowOverlap:false但它隐藏了其中一个值,甚至尝试了很多方法但无法获得正确的结果,例如在图表上以不同的方式显示值。
即使尝试在副驾驶和 ChatGPT 上寻找答案,但仍然没有得到正确的答案,他们要求我做的更改对我没有帮助。
您可以使用 x 和 y API 选项完全控制数据标签的位置:https://api.highcharts.com/highcharts/series.column.data.dataLabels.x
示例代码设置:
series: [{
data: [{
y: 5,
dataLabels: {
x: 10,
y: -10
}
}, {
y: 7,
dataLabels: {
x: -10,
y: 20
}
}, {
y: 3,
dataLabels: {
x: 15,
y: 5
}
}]
}],