Я хочу использовать апекс-диаграммы для ежедневного отображения прибыли / убытка для торгового портфеля по акциям. Каждый столбец за день представляет прибыль / убыток по акциям в портфеле за этот день. Кроме того, я хочу показать линейную диаграмму, которая показывает общее изменение всех прибылей и убытков за этот день.
В настоящее время я могу составить столбчатую диаграмму с накоплением, но у меня есть следующие вопросы: - Как я могу удалить неуказанные даты. Мне не нужны выходные на оси X. Я не определил эти даты в данных, но диаграммы по-прежнему показывают, что они «заполняют пробелы» между двумя днями. - Как я могу добавить линейную диаграмму?
Вот код, который у меня сейчас есть:
<div id="chart-stackedbar"></div>
<script>
jQuery(function(){
var optionsStackedBar = {
series: [{
name: 'AAPL',
data: ['','',11.5, -2.3, 5, 3, -2, -4,2,'','',9,5,'']
}, {
name: 'MSFT',
data: [13, 23, 20, 8, 13, 27,5,3,1,-4,-2,1]
}, {
name: 'TSLA',
data: [11, 17, 15, 15, 21, 14]
}, {
name: 'AMZN',
data: [21, 7, 25, 13, 22, 8]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
horizontal: false,
},
},
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT','01/05/2011 GMT', '01/08/2011 GMT', '01/09/2011 GMT', '01/10/2011 GMT', '01/11/2011 GMT', '01/12/2011 GMT', '01/15/2011 GMT', '01/16/2011 GMT', '01/17/2011 GMT', '01/18/2011 GMT'],
},
legend: {
position: 'bottom',
offsetY: 40
},
fill: {
opacity: 1
}
};
var stackedBarChart = new ApexCharts(document.querySelector("#chart-stackedbar"), optionsStackedBar);
stackedBarChart.render();
});
</script>