я нуждаюсь в маленькой помощи со следующим:
У меня есть следующий график:
Highcharts.chart('rendimientosall', {
colors: ['#00ff6c','#03deec','#f5940a'],
chart: {
type: 'column'
},
title: {
text: 'RENDIMIENTO'
},
subtitle: {
text: 'Acumulado'
},
xAxis: {
categories: ['190 cantidad: 6', '240 cantidad: 13', '320 cantidad: 5'],crosshair: true,
labels: { style: { color: 'networking', fontSize:'15px' } }
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Rendimiento (Km)',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
}
}
},legend: {
align: 'center',
borderWidth: 0
},
series: [{
name: 'Rendimiento',
colorByPoint: true,
data: [{
name: '190',
y: 112108,
}, {
name: '240',
y: 84289,
}, {
name: '320',
y: 70249,
}]
},{
type: 'line',
name: 'Meta',
color: 'transparent',
data: [83712,72341,69638],
marker: {
lineWidth: 5,
lineColor: Highcharts.getOptions().colors[5],
fillColor: 'white'
},dataLabels: {
enabled: true,
color: 'red'
}
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="rendimientosall" style="min-width: 310px; height: 400px; margin: 0 auto; margin-top:20px;"></div>
То, что я нуждаюсь в том, чтобы сделать, он состоит в том, чтобы размещать в КРАСНЫХ точках текст, который говорил бы костлявую ЦЕЛЬ, может состоять рядом с красной точкой или под красной точкой текст в том, чтобы он сказал - поместите - возможный делать это?
Если закрепляется в легенде красная точка, он считает именем Цель, но мне не удается разместить это же самое имя внутри графика, идея состоит в том, чтобы ему удалось видеть внутри бруска под красной точкой или в сторону красной точки.
Я остаюсь внимательным большое спасибо.
Чтобы издавать форму, в которой он является dataLabel, ты должен распределять одну funciГіn в свойстве formatter
из dataLabel, будь funciГіn будь должен возвращать string, который будет являться тем, что mostrarГЎ в label. Чтобы вооружать этот string ты можешь использовать объект this
внутри функции, которая представляет Игчарт Поинт
Adicionalmente я agreguГ© свойство useHTML
то, что позволяет добавлять этикетки html в string, который возвращает ее funciГіn, и этих добавляют style
или css class
(я это делаем из-за личных предпочтений), если ты используешь это, должен считать, что весь стиль dataLabel, что назначенная по умолчанию теряется, и ты сейчас должен стиль dГЎrselo в объекты html, что ты использовал
Highcharts.chart('rendimientosall', {
colors: ['#00ff6c','#03deec','#f5940a'],
chart: {
type: 'column'
},
title: {
text: 'RENDIMIENTO'
},
subtitle: {
text: 'Acumulado'
},
xAxis: {
categories: ['190 cantidad: 6', '240 cantidad: 13', '320 cantidad: 5'],crosshair: true,
labels: { style: { color: 'networking', fontSize:'15px' } }
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Rendimiento (Km)',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: '',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
}
}
},legend: {
align: 'center',
borderWidth: 0
},
series: [{
name: 'Rendimiento',
colorByPoint: true,
data: [{
name: '190',
y: 112108,
}, {
name: '240',
y: 84289,
}, {
name: '320',
y: 70249,
}]
},{
type: 'line',
name: 'Meta',
color: 'transparent',
data: [83712,72341,69638],
marker: {
lineWidth: 5,
lineColor: Highcharts.getOptions().colors[5],
fillColor: 'white'
},dataLabels: {
enabled: true,
color: 'red',
useHTML: true,
formatter: function() {
let dataLabelText = `<div style="text-align: center;">
<div>${this.y.toLocaleString()}</div>
<div>Meta</div>
</div>`;
return dataLabelText;
}
}
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="rendimientosall" style="min-width: 310px; height: 400px; margin: 0 auto; margin-top:20px;"></div>