Apexchart: сложенные столбцы с линейной диаграммой и пропущенными днями - PullRequest
0 голосов
/ 16 июня 2020

Я хочу использовать апекс-диаграммы для ежедневного отображения прибыли / убытка для торгового портфеля по акциям. Каждый столбец за день представляет прибыль / убыток по акциям в портфеле за этот день. Кроме того, я хочу показать линейную диаграмму, которая показывает общее изменение всех прибылей и убытков за этот день.

В настоящее время я могу составить столбчатую диаграмму с накоплением, но у меня есть следующие вопросы: - Как я могу удалить неуказанные даты. Мне не нужны выходные на оси 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...