Есть запрос данные получаем и создать new Chart(document.getElementById("chartWeek"), { type: "bar" С описанием номеров этапов всех количества s0....s100... которое равно ["Новый запрос", "Подготовка КП",'КП отправлено','Подготовка договора','Договор отправлен','Выставить счет/спецификацию','Контроль оплаты','Заказ в производстве','Заказ на сборке','Заказ готов к отгрузке','Заказ доставлен','ОПИ','Приобретен','Не приобретено' ] И цветом backgroundColor: ["#79c4f7","#78d1dc",'6de3c7','f7cd7b','8dc3e5','b0e3f3','de7174','74d1ed','a6e7fa','44a46d','f6f312','b57eee','ffa500','ff0000'] Где в каждом этапе есть ...._bill и ...._order выводить этап в котором есть сумма _bill и _order окрашивая их нужный цвет $dayOfWeek = date('N'); if ($dayOfWeek == 1) { // Если понедельник — берем даты прошлой недели $startDate = date('Y-m-d', strtotime('monday last week')); $endDate = date('Y-m-d', strtotime('friday last week')); } else { // В остальные дни — текущая неделя $startDate = date('Y-m-d', strtotime('monday this week')); $endDate = date('Y-m-d', strtotime('friday this week')); } $sqlW = " SELECT COUNT(CASE WHEN status_deal = 0 THEN 1 ELSE 0 END) AS s0, COUNT(CASE WHEN status_deal = 2 THEN 1 ELSE 0 END) AS s2, COUNT(CASE WHEN status_deal = 3 THEN 1 ELSE 0 END) AS s3, COUNT(CASE WHEN status_deal = 4 THEN 1 ELSE 0 END) AS s4, COUNT(CASE WHEN status_deal = 5 THEN 1 ELSE 0 END) AS s5, COUNT(CASE WHEN status_deal = 6 THEN 1 ELSE 0 END) AS s6, COUNT(CASE WHEN status_deal = 7 THEN 1 ELSE 0 END) AS s7, COUNT(CASE WHEN status_deal = 8 THEN 1 ELSE 0 END) AS s8, COUNT(CASE WHEN status_deal = 9 THEN 1 ELSE 0 END) AS s9, COUNT(CASE WHEN status_deal = 10 THEN 1 ELSE 0 END) AS s10, COUNT(CASE WHEN status_deal = 11 THEN 1 ELSE 0 END) AS s11, COUNT(CASE WHEN status_deal = 12 THEN 1 ELSE 0 END) AS s12, COUNT(CASE WHEN status_deal = 150 AND payment_step != 0 THEN 1 ELSE 0 END) AS s150, COUNT(CASE WHEN status_deal = 100 AND payment_step >= 2 AND payment_step IS NOT NULL THEN 1 ELSE 0 END) AS s100, SUM(CASE WHEN status_deal = 0 THEN o.bill_amount ELSE 0 END) AS deal0_bill, SUM(CASE WHEN status_deal = 0 THEN o.sum_order ELSE 0 END) AS deal0_order, SUM(CASE WHEN status_deal = 2 THEN o.bill_amount ELSE 0 END) AS deal2_bill, SUM(CASE WHEN status_deal = 2 THEN o.sum_order ELSE 0 END) AS deal2_order, SUM(CASE WHEN status_deal = 3 THEN o.bill_amount ELSE 0 END) AS deal3_bill, SUM(CASE WHEN status_deal = 3 THEN o.sum_order ELSE 0 END) AS deal3_order, SUM(CASE WHEN status_deal = 4 THEN o.bill_amount ELSE 0 END) AS deal4_bill, SUM(CASE WHEN status_deal = 4 THEN o.sum_order ELSE 0 END) AS deal4_order, SUM(CASE WHEN status_deal = 5 THEN o.bill_amount ELSE 0 END) AS deal5_bill, SUM(CASE WHEN status_deal = 5 THEN o.sum_order ELSE 0 END) AS deal5_order, SUM(CASE WHEN status_deal = 6 THEN o.bill_amount ELSE 0 END) AS deal6_bill, SUM(CASE WHEN status_deal = 6 THEN o.sum_order ELSE 0 END) AS deal6_order, SUM(CASE WHEN status_deal = 7 THEN o.bill_amount ELSE 0 END) AS deal7_bill, SUM(CASE WHEN status_deal = 7 THEN o.sum_order ELSE 0 END) AS deal7_order, SUM(CASE WHEN status_deal = 8 THEN o.bill_amount ELSE 0 END) AS deal8_bill, SUM(CASE WHEN status_deal = 8 THEN o.sum_order ELSE 0 END) AS deal8_order, SUM(CASE WHEN status_deal = 9 THEN o.bill_amount ELSE 0 END) AS deal9_bill, SUM(CASE WHEN status_deal = 9 THEN o.sum_order ELSE 0 END) AS deal9_order, SUM(CASE WHEN status_deal = 10 THEN o.bill_amount ELSE 0 END) AS deal10_bill, SUM(CASE WHEN status_deal = 10 THEN o.sum_order ELSE 0 END) AS deal10_order, SUM(CASE WHEN status_deal = 11 THEN o.bill_amount ELSE 0 END) AS deal11_bill, SUM(CASE WHEN status_deal = 11 THEN o.sum_order ELSE 0 END) AS deal11_order, SUM(CASE WHEN status_deal = 12 THEN o.bill_amount ELSE 0 END) AS deal12_bill, SUM(CASE WHEN status_deal = 12 THEN o.sum_order ELSE 0 END) AS deal12_order, SUM(CASE WHEN status_deal = 150 AND payment_step != 0 THEN o.bill_amount ELSE 0 END) AS deal150_bill, SUM(CASE WHEN status_deal = 150 AND payment_step != 0 THEN o.sum_order ELSE 0 END) AS deal150_order, SUM(CASE WHEN status_deal = 100 AND payment_step >= 2 AND payment_step IS NOT NULL THEN o.bill_amount ELSE 0 END) AS deal100_bill, SUM(CASE WHEN status_deal = 100 AND payment_step >= 2 AND payment_step IS NOT NULL THEN o.sum_order ELSE 0 END) AS deal100_order FROM orders WHERE date(deal_update) BETWEEN :m AND :f -- WHERE date(invoice_date) BETWEEN :m AND :f "; $stmtW = $SQLite3->prepare($sqlW); $stmtW->bindValue(':m', $startDate, SQLITE3_TEXT); $stmtW->bindValue(':f', $endDate, SQLITE3_TEXT); $weekStats = $stmtW->execute()->fetchArray(SQLITE3_ASSOC); //$res = $stmtW->execute(); //$weekStats = $res ? $res->fetchArray(SQLITE3_ASSOC) : ['s150' => 0, 's100' => 0]; //$weekStats = $res ? $res->fetchArray(SQLITE3_ASSOC) : $weekStats;

Ниже покажу рабочую схему, как из ваших PHP-данных корректно построить Chart.js bar,
где:

есть этапы s0…s100
каждый этап показывается только если есть сумма _bill или _order
цвет берётся строго по этапу
можно вывести два столбца на этап: _bill и _order

1️⃣ Соответствие этапов

js
const stageLabels = [
  "Новый запрос",
  "Подготовка КП",
  "КП отправлено",
  "Подготовка договора",
  "Договор отправлен",
  "Выставить счет/спецификацию",
  "Контроль оплаты",
  "Заказ в производстве",
  "Заказ на сборке",
  "Заказ готов к отгрузке",
  "Заказ доставлен",
  "ОПИ",
  "Приобретен",
  "Не приобретено"
];

const stageColors = [
  "#79c4f7","#78d1dc","#6de3c7","#f7cd7b",
  "#8dc3e5","#b0e3f3","#de7174","#74d1ed",
  "#a6e7fa","#44a46d","#f6f312","#b57eee",
  "#ffa500","#ff0000"
];

const stageCodes = [0,2,3,4,5,6,7,8,9,10,11,12,150,100];

2️⃣ Передаём PHP-данные в JS

php
<script>
const weekStats = <?= json_encode($weekStats, JSON_UNESCAPED_UNICODE) ?>;
</script>

3️⃣ Формирование данных (ключевая логика)

js
const billData = [];
const orderData = [];
const labels = [];
const colors = [];

stageCodes.forEach((code, i) => {
    const bill = Number(weekStats[`deal${code}_bill`] || 0);
    const order = Number(weekStats[`deal${code}_order`] || 0);

    // показываем этап только если есть сумма
    if (bill > 0 || order > 0) {
        labels.push(stageLabels[i]);
        billData.push(bill);
        orderData.push(order);
        colors.push(stageColors[i]);
    }
});

4️⃣ Создание Chart.js

js
new Chart(document.getElementById("chartWeek"), {
    type: "bar",
    data: {
        labels: labels,
        datasets: [
            {
                label: "Счет (_bill)",
                data: billData,
                backgroundColor: colors
            },
            {
                label: "Заказ (_order)",
                data: orderData,
                backgroundColor: colors.map(c => c + "99") // прозрачность
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            tooltip: {
                callbacks: {
                    label: ctx =>
                        `${ctx.dataset.label}: ${ctx.raw.toLocaleString()} ₽`
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

5️⃣ Что в итоге получится

✔ Каждый этап — один цвет
✔ Этап не показывается, если нет _bill и _order
✔ На этапе 2 столбца (счет + заказ)
✔ Цвет строго соответствует этапу
✔ Данные полностью берутся из вашего SQL

Если нужно:

stacked bar
показывать только bill или только order
подписывать суммы на столбцах
группировать по дням

— скажи, сделаю сразу готовый вариант.

подписывать суммы на столбцах

Для подписей сумм прямо на столбцах в Chart.js используется плагин
👉 chartjs-plugin-datalabels

Ниже — минимально и правильно под ваш код.

1️⃣ Подключение плагина

html
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

Для Chart.js v3+ — это корректная версия

2️⃣ Регистрация плагина

js
Chart.register(ChartDataLabels);

3️⃣ График с подписями сумм

js
new Chart(document.getElementById("chartWeek"), {
    type: "bar",
    data: {
        labels: labels,
        datasets: [
            {
                label: "Счет (_bill)",
                data: billData,
                backgroundColor: colors
            },
            {
                label: "Заказ (_order)",
                data: orderData,
                backgroundColor: colors.map(c => c + "99")
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            datalabels: {
                anchor: 'end',
                align: 'top',
                color: '#333',
                font: {
                    weight: 'bold',
                    size: 11
                },
                formatter: value => {
                    if (value === 0) return '';
                    return value.toLocaleString('ru-RU') + ' ₽';
                }
            },
            tooltip: {
                callbacks: {
                    label: ctx =>
                        `${ctx.dataset.label}: ${ctx.raw.toLocaleString('ru-RU')} ₽`
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

4️⃣ Что будет

✔ Сумма над каждым столбцом
✔ 0 не подписываются
✔ Формат 1 234 567 ₽
✔ Работает для _bill и _order
✔ Цвета этапов сохранены

5️⃣ Частые улучшения (по желанию)

🔹 Подпись внутри столбца

js
anchor: 'center',
align: 'center',
color: '#fff'

🔹 Только для `_bill`

js
formatter: (value, ctx) =>
    ctx.dataset.label.includes('_bill') && value > 0
        ? value.toLocaleString('ru-RU') + ' ₽'
        : ''

🔹 Автоскрытие при маленьких значениях

js
display: ctx => ctx.dataset.data[ctx.dataIndex] > 5000

Если нужно:

stacked + подписи
итоговая сумма над этапом
разный формат для bill / order
перенос подписей при большом количестве этапов

— скажи, сделаю готовый вариант под тебя.

перенос подписей при большом количестве этапов итоговая сумма над этапом

Отлично, это две разные, но совместимые задачи. Ниже — готовое решение под ваш график.

✅ 1. Перенос подписей при большом количестве этапов

Проблема: подписи начинают наезжать друг на друга.
Решение:

поворот подписей
авто-смещение
уменьшение шрифта
скрытие при нехватке места

🔧 Настройки `datalabels`

js
plugins: {
    datalabels: {
        anchor: 'end',
        align: 'top',
        offset: ctx => ctx.dataIndex % 2 === 0 ? 4 : 14, // шахматный перенос
        rotation: ctx => labels.length > 8 ? -90 : 0,
        clamp: true,
        clip: false,
        color: '#333',
        font: ctx => ({
            size: labels.length > 10 ? 9 : 11,
            weight: 'bold'
        }),
        formatter: value => {
            if (value <= 0) return '';
            return value.toLocaleString('ru-RU') + ' ₽';
        }
    }
}

✔ Что это даёт

подписи чередуются по высоте
при большом количестве этапов — вертикальный текст
не выходят за пределы canvas

✅ 2. Итоговая сумма над этапом (bill + order)

Это самое важное.
Решается отдельным датасетом только для подписей, без отрисовки столбца.

🧠 Логика

Для каждого этапа:


итог = dealX_bill + dealX_order

2️⃣ Добавляем итоговый массив

js
const totalData = billData.map((v, i) => v + orderData[i]);

3️⃣ Добавляем датасет «Итого»

js
datasets: [
    {
        label: "Счет (_bill)",
        data: billData,
        backgroundColor: colors
    },
    {
        label: "Заказ (_order)",
        data: orderData,
        backgroundColor: colors.map(c => c + "99")
    },
    {
        label: "Итого",
        data: totalData,
        backgroundColor: 'transparent',
        datalabels: {
            anchor: 'end',
            align: 'top',
            offset: 18,
            color: '#000',
            font: {
                size: 12,
                weight: 'bold'
            },
            formatter: value =>
                value > 0 ? value.toLocaleString('ru-RU') + ' ₽' : ''
        }
    }
]

⚠️ Важно: этот датасет не рисует столбцы, только подписи.

🧩 Итоговый эффект

✔ bill и order — обычные столбцы
✔ подписи аккуратно переносятся
✔ одна жирная сумма над этапом
✔ работает при 5 и при 20 этапах
✔ не ломает цвета и логику

🚀 Если хочешь дальше улучшить

Могу сделать:

🔹 итог в рамке / плашке
🔹 разные цвета итогов (прибыль / убыток)
🔹 скрывать bill/order, показывать только итог
🔹 авто-уменьшение шрифта при resize
🔹 stacked + итог сверху

Скажи — что именно нужно дальше.

что такое stacked bar

Stacked bar (накопительная столбчатая диаграмма) — это столбчатый график,
где несколько значений для одного этапа складываются друг на друга,
а не рисуются рядом.

🔍 Сравнение на примере

❌ Обычный bar (как у тебя сейчас)

Для этапа «КП отправлено»:

sql
| bill | order |
| 100k | 80k   |

👉 два столбца рядом

✅ Stacked bar

scss
      ███████████  ← order (80k)
      ████████████████ ← bill (100k)
      ─────────────────
        Итого: 180k

👉 один столбец = этап,
👉 внутри — части bill + order,
👉 высота = итоговая сумма

🧠 Когда использовать stacked bar

✔ Нужно видеть общую сумму по этапу
✔ Важно понимать из чего она состоит
✔ Этапов много — меньше визуального шума
✔ Отлично сочетается с итоговой подписью сверху

🧩 Как включить stacked bar в Chart.js

1️⃣ Включаем stacking осей

js
options: {
    scales: {
        x: {
            stacked: true
        },
        y: {
            stacked: true,
            beginAtZero: true
        }
    }
}

2️⃣ Датасеты остаются теми же

js
datasets: [
    {
        label: "Счет (_bill)",
        data: billData,
        backgroundColor: colors
    },
    {
        label: "Заказ (_order)",
        data: orderData,
        backgroundColor: colors.map(c => c + "99")
    }
]

Chart.js сам сложит значения.

✨ Итог с stacked + подписью

Ты получаешь:

1 столбец = 1 этап
bill + order внутри столбца
итоговую сумму над столбцом
читаемость даже при 15–20 этапах

🆚 Когда НЕ стоит использовать

❌ Нужно сравнивать bill и order между этапами отдельно
❌ Важно видеть разницу высот именно bill/order

💡 Рекомендация для твоего случая

👉 stacked bar + итог сверху —
лучший вариант для воронки сделок и этапов.

Если хочешь — я:

соберу полный финальный конфиг под твой код
добавлю включение/выключение stacked
сделаю переключатель кнопкой

Скажи 👍

В выводимую информацию добавить еще количество COUNT

Отлично, логично 👍
Добавим COUNT (количество сделок) прямо в выводимую информацию — аккуратно и наглядно.

Покажу лучший вариант для stacked bar + итог + перенос подписей.

🧠 Что именно добавим

Для каждого этапа будет отображаться:

makefile
ИТОГО: 180 000 ₽
(5 шт.)

Где:

180 000 ₽ = bill + order
5 шт. = COUNT (s0, s2, s3 …)

1️⃣ Подготавливаем массив COUNT

После формирования labels, billData, orderData:

js
const countData = [];

stageCodes.forEach(code => {
    countData.push(Number(weekStats[`s${code}`] || 0));
});

❗ Важно: countData должен соответствовать только отфильтрованным этапам.
Если используешь фильтр (bill > 0 || order > 0), то правильный вариант:

js
const countData = [];

stageCodes.forEach((code, i) => {
    const bill = Number(weekStats[`deal${code}_bill`] || 0);
    const order = Number(weekStats[`deal${code}_order`] || 0);

    if (bill > 0 || order > 0) {
        countData.push(Number(weekStats[`s${code}`] || 0));
    }
});

2️⃣ Итоговая сумма

js
const totalData = billData.map((v, i) => v + orderData[i]);

3️⃣ Итоговый датасет с суммой + COUNT

js
{
    label: "Итого",
    data: totalData,
    backgroundColor: 'transparent',
    datalabels: {
        anchor: 'end',
        align: 'top',
        offset: 18,
        color: '#000',
        font: {
            size: 12,
            weight: 'bold'
        },
        formatter: (value, ctx) => {
            const count = countData[ctx.dataIndex];
            if (value <= 0) return '';
            return (
                value.toLocaleString('ru-RU') + ' ₽\n' +
                '(' + count + ' шт.)'
            );
        }
    }
}

4️⃣ Чтобы перенос строки работал

Добавь в plugins.datalabels:

js
plugins: {
    datalabels: {
        textAlign: 'center'
    }
}

🎯 Что получится визуально

✔ Один столбец = этап
✔ Внутри — bill + order (stacked)
✔ Над столбцом:

scss
180 000 ₽
(5 шт.)

✔ Читаемо даже при большом количестве этапов
✔ COUNT не мешает столбцам

💡 Дополнительно (по желанию)

🔹 COUNT внутри столбца

js
anchor: 'center',
align: 'center',
color: '#fff'

🔹 Скрывать COUNT при 0

js
const count = countData[ctx.dataIndex];
if (count === 0) return value.toLocaleString('ru-RU') + ' ₽';

🔹 Разный цвет COUNT

js
return [
  value.toLocaleString('ru-RU') + ' ₽',
  '%c(' + count + ' шт.)'
];

Если хочешь — соберу полный финальный JS одним куском под твой SQL без упрощений.

почему не выводиться количество count ? plugins: { tooltip: { callbacks: { label: ctx => { const count = countData[ctx.dataIndex]; //const count = ctx.dataset.countData[ctx.dataIndex]; ${ctx.dataset.label}: ${ctx.raw.toLocaleString('ru-RU')} ₽ (${count}) } } } },

Причина простая, но очень частая 🙂
ты ничего не возвращаешь из функции.

В tooltip.callbacks.label обязательно нужен return.
Сейчас строка просто создаётся и теряется.

❌ Как сейчас (не работает)

js
label: ctx => {
    const count = countData[ctx.dataIndex];

    `${ctx.dataset.label}: ${ctx.raw.toLocaleString('ru-RU')} ₽ (${count})`
}

✅ Правильно (будет выводиться)

js
label: ctx => {
    const count = countData[ctx.dataIndex];
    return `${ctx.dataset.label}: ${ctx.raw.toLocaleString('ru-RU')} ₽ (${count} шт.)`;
}

или коротко:

js
label: ctx =>
    `${ctx.dataset.label}: ${ctx.raw.toLocaleString('ru-RU')} ₽ (${countData[ctx.dataIndex]} шт.)`

🔎 Дополнительные проверки (если вдруг всё ещё не видно)

1️⃣ `countData` должен существовать в той же области видимости

js
console.log(countData);

2️⃣ Индексы должны совпадать

Если у тебя фильтрация этапов, countData должен формироваться в том же цикле, что и labels.

3️⃣ Для stacked bar

ctx.raw — это значение текущего датасета, а не итог.

Если нужен COUNT только один раз на этап, можно:

js
label: ctx => {
    if (ctx.datasetIndex > 0) return null; // только для первого датасета
    const count = countData[ctx.dataIndex];
    return `Сделок: ${count} шт.`;
}

✅ Рабочий итоговый вариант tooltip

js
plugins: {
    tooltip: {
        callbacks: {
            label: ctx => {
                const count = countData[ctx.dataIndex];
                return `${ctx.dataset.label}: ${ctx.raw.toLocaleString('ru-RU')} ₽ (${count} шт.)`;
            }
        }
    }
}

Если хочешь — покажи как ты формируешь countData, я сразу проверю соответствие индексов.

ChatGPT может допускать ошибки. Проверяйте важную информацию. Смотрите настройки cookie-файлов.

Вы сказали:

ChatGPT сказал:

1️⃣ Соответствие этапов

2️⃣ Передаём PHP-данные в JS

3️⃣ Формирование данных (ключевая логика)

4️⃣ Создание Chart.js

5️⃣ Что в итоге получится

Вы сказали:

ChatGPT сказал:

1️⃣ Подключение плагина

2️⃣ Регистрация плагина

3️⃣ График с подписями сумм

4️⃣ Что будет

5️⃣ Частые улучшения (по желанию)

🔹 Подпись внутри столбца

🔹 Только для _bill

🔹 Автоскрытие при маленьких значениях

Вы сказали:

ChatGPT сказал:

✅ 1. Перенос подписей при большом количестве этапов

🔧 Настройки datalabels

✔ Что это даёт

✅ 2. Итоговая сумма над этапом (bill + order)

🧠 Логика

2️⃣ Добавляем итоговый массив

3️⃣ Добавляем датасет «Итого»

🧩 Итоговый эффект

🚀 Если хочешь дальше улучшить

Вы сказали:

ChatGPT сказал:

🔍 Сравнение на примере

❌ Обычный bar (как у тебя сейчас)

✅ Stacked bar

🧠 Когда использовать stacked bar

🧩 Как включить stacked bar в Chart.js

1️⃣ Включаем stacking осей

2️⃣ Датасеты остаются теми же

✨ Итог с stacked + подписью

🆚 Когда НЕ стоит использовать

💡 Рекомендация для твоего случая

Вы сказали:

ChatGPT сказал:

🧠 Что именно добавим

1️⃣ Подготавливаем массив COUNT

2️⃣ Итоговая сумма

3️⃣ Итоговый датасет с суммой + COUNT

4️⃣ Чтобы перенос строки работал

🎯 Что получится визуально

💡 Дополнительно (по желанию)

🔹 COUNT внутри столбца

🔹 Скрывать COUNT при 0

🔹 Разный цвет COUNT

Вы сказали:

ChatGPT сказал:

❌ Как сейчас (не работает)

✅ Правильно (будет выводиться)

🔎 Дополнительные проверки (если вдруг всё ещё не видно)

1️⃣ countData должен существовать в той же области видимости

2️⃣ Индексы должны совпадать

3️⃣ Для stacked bar

✅ Рабочий итоговый вариант tooltip

🔹 Только для `_bill`

🔧 Настройки `datalabels`

1️⃣ `countData` должен существовать в той же области видимости