Как отобразить полоску сумм стека в электронных диаграммах

Я использую eChatrs в качестве библиотеки диаграмм. Нужный график должен выглядеть так:

Что мне нужно, так это показать итоги над каждым столбцом. Как лучше всего это делать?

03.12.2018 15:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 043

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Для этого вы можете использовать форматтер, посмотрите эту демонстрацию:

let echartsObj = echarts.init(document.querySelector('#canvas'));
series = [{
    name: 'Server #1',
    data: [100, 115, 165, 107, 67]
}, {
    name: 'Server #2',
    data: [85, 106, 129, 161, 123]
}, {
    name: 'Server #3',
    data: [67, 87, 86, 167, 157]
}]

genFormatter = (series) => {
    return (param) => {
        console.info(param);
        let sum = 0;
        series.forEach(item => {
            sum += item.data[param.dataIndex];
        });
        return sum
    }
};

option = {
    color: ['#b8d6f2', '#c6e19a', '#f3b879' ],
    legend: {
        data: series.map(item => item.name),
        right: 'right',

    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
    },

    yAxis: {
        type: 'value'
    },
    series: series.map((item, index) => Object.assign(item, {
        type: 'bar',
        stack: true,
        label: {
            show: index == series.length - 1 ? true : false,
            formatter: genFormatter(series),
            fontSize: 20,
            color: 'black',
            position: 'top'
        },
    }))
};
echartsObj.setOption(option)

<html>
      <header>
        <script src = "https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
      </header>
      <body>
        <div id = "canvas" style = "width: 70%; height: 300px">
        </div>
      </body>
</html>

Однако, как мы видим, эта демонстрация отображает только общее значение над каждым столбцом.

если вам нужна как общая стоимость, так и стоимость каждой серии,

Вот трюк, чтобы добиться этого: используйте пустую серию для отображения общего значения.

проверьте эту демонстрацию:

let echartsObj = echarts.init(document.querySelector('#canvas'));

series = [{
    name: 'Server #1',
    data: [100, 115, 165, 107, 67]
}, {
    name: 'Server #2',
    data: [85, 106, 129, 161, 123]
}, {
    name: 'Server #3',
    data: [67, 87, 86, 167, 157]
}, {
    name: 'Server #3',
    data: [0,0,0,0,0]
}]

genFormatter = (series) => {
    return (param) => {
        console.info(param);
        let sum = 0;
        series.forEach(item => {
            sum += item.data[param.dataIndex];
        });
        return sum
    }
};

function isLastSeries(index) {
    return index === series.length - 1
}
option = {
    color: ['#b8d6f2', '#c6e19a', '#f3b879' ],
    legend: {
        data: series.map(item => item.name),
        right: 'right',
        
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
    },
   
    yAxis: {
        type: 'value'
    },
    series: series.map((item, index) => Object.assign(item, {
        type: 'bar',
        stack: true,
        label: {
            show: true,
            formatter: isLastSeries(index) ? genFormatter(series) : null,
            fontSize:  isLastSeries(index) ? 20 : 15,
            color: 'black',
            position: isLastSeries(index) ? 'top' : 'inside'
        },
    }))
};
echartsObj.setOption(option)

<html>
      <header>
        <script src = "https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
      </header>
      <body>
        <div id = "canvas" style = "width: 70%; height: 400px">
        </div>
      </body>
    </html>

Вы можете упростить этот код: показать: index === series.length - 1,

— 23.07.2019 13:38

Хороший трюк для создания набора данных, заполненного пустыми значениями !; Но возможно ли иметь две этикетки на одной и той же серии?

— 25.10.2019 18:12

18.12.2018 08:45