Понял твою задачу — нужно собрать сумму всех заказов (sum_order) по статусам сделок (status_deal) из таблицы orders и вывести их на stacked bar chart (или line chart) в Chart.js.

Разбор задачи

• Есть список стадий сделки $ST_DEAL, у каждой стадии есть stage_lid — это значение, которое хранится в поле status_deal таблицы orders.

• Нужно для каждой стадии подсчитать сумму всех sum_order, где status_deal == stage_lid.

• Затем эти суммы отобразить в виде столбцов (стек-бара), где по оси X будут названия стадий, а по Y — суммы.

• Ты хочешь получить это из базы SQLite и отобразить в Chart.js.

Шаг 1. SQL запрос для подсчёта суммы по стадиям

Тебе нужно получить суммы по каждому статусу сделки:

sql
Копировать код
SELECT status_deal, SUM(sum_order) as total_sum
FROM orders
GROUP BY status_deal;

Но чтобы вывести суммы в правильном порядке и с правильными названиями стадий из $ST_DEAL, лучше собрать данные в PHP, например так:

php
Копировать код
// 1. Получаем суммы из БД
$query = $SQLite3->query("SELECT status_deal, SUM(sum_order) as total_sum FROM orders GROUP BY status_deal");

$sums_by_status = [];
while($row = $query->fetchArray(SQLITE3_ASSOC)) {
    $sums_by_status[(int)$row['status_deal']] = (int)$row['total_sum'];
}

// 2. Формируем массив для графика по стадиям из $ST_DEAL
$labels = [];
$data = [];

foreach($ST_DEAL as $key => $stage) {
    $labels[] = $stage['text']; // подписи для оси X
    $data[] = $sums_by_status[$stage['stage_lid']] ?? 0; // сумма для этого статуса или 0, если нет заказов
}

Шаг 2. Код для Chart.js

Вот простой пример, как можно построить stacked bar chart:

html
Копировать код
<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');

const labels = <?php echo json_encode($labels); ?>;
const data = <?php echo json_encode($data); ?>;

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Сумма заказов, руб',
            data: data,
            backgroundColor: 'rgba(54, 162, 235, 0.7)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            x: {
                stacked: true // если нужно стекать несколько наборов, иначе можно убрать
            },
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Сумма (руб)'
                }
            }
        }
    }
});
</script>

Дополнительно

• Если у тебя несколько наборов данных (например, разные фильтры или суммы по разным категориям), то можно добавить несколько datasets для stacked bar.

• Цвета можно взять из $ST_DEAL — там у тебя есть css с цветами.

Подытожим

1. Сделай запрос к БД — получи суммы по status_deal.

2. Пройди по массиву $ST_DEAL — собери labels и данные для графика.

3. Передай данные в Chart.js и отрисуй график.

Если хочешь — могу помочь написать полный пример кода или помочь с чем-то ещё. Напиши!

Понял! Ты хочешь сделать график с оси X — этапы из $ST_DEAL, где:

• Цвет каждого столбика соответствует цвету из $ST_DEAL (поле css — там есть background-color),

• Над каждым столбиком (или внутри) выводится сумма по этому этапу,

• И текст этапа — подпись по оси X.

Как это реализовать

1. Извлечь из $ST_DEAL цвета для каждого этапа.

2. В Chart.js задать цвета столбцов индивидуально.

3. Вывести сумму сверху столбика — для этого используем плагин chartjs-plugin-datalabels (очень удобно для подписей).

Полный пример

php
Копировать код
<?php
// Пример данных сумм по этапам (замени на свои реальные данные из БД)
$sums_by_status = [
    0 => 30000,
    1 => 12000,
    2 => 15000,
    3 => 7000,
    // ...
];

// Собираем массивы для графика
$labels = [];
$colors = [];
$data = [];

foreach($ST_DEAL as $key => $stage) {
    $labels[] = $stage['text'];
    
    // Извлекаем цвет из css (ищем background-color)
    preg_match('/background-color:([^;"]+);?/', $stage['css'], $matches);
    $colors[] = isset($matches[1]) ? trim($matches[1]) : '#333'; // если не нашли - серый
    
    $data[] = $sums_by_status[$stage['stage_lid']] ?? 0;
}
?>

<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');

const labels = <?php echo json_encode($labels); ?>;
const data = <?php echo json_encode($data); ?>;
const colors = <?php echo json_encode($colors); ?>;

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Сумма заказов, руб',
            data: data,
            backgroundColor: colors,
            borderColor: colors,
            borderWidth: 1,
            borderRadius: 4
        }]
    },
    options: {
        plugins: {
            datalabels: {
                color: '#000',
                anchor: 'end',
                align: 'start',
                formatter: function(value) {
                    return value > 0 ? value.toLocaleString('ru-RU') + ' руб' : '';
                },
                font: {
                    weight: 'bold'
                }
            },
            legend: {
                display: false
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.parsed.y.toLocaleString('ru-RU') + ' руб';
                    }
                }
            }
        },
        scales: {
            x: {
                ticks: {
                    maxRotation: 45,
                    minRotation: 45,
                    autoSkip: false
                }
            },
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: 'Сумма (руб)'
                }
            }
        }
    },
    plugins: [ChartDataLabels]
});
</script>

Объяснение:

• Цвет каждого столбца берётся из background-color в $ST_DEAL.

• Для вывода чисел сверху используется плагин chartjs-plugin-datalabels (надо подключить).

• Текст этапов под каждым столбиком — из $ST_DEAL.

• Сумма отображается сверху каждого столбика (если сумма > 0).

Если хочешь, могу помочь написать, как получить реальные суммы из SQLite, а потом подставить в этот код. Или как подстроить дизайн!

Ошибка Uncaught ReferenceError: Chart is not defined говорит о том, что библиотека Chart.js не была корректно загружена перед использованием переменной Chart.

💥 Почему это происходит?

Ты пытаешься инициализировать график:

javascript
Копировать код
const myChart = new Chart(ctx, {

...но переменная Chart ещё не определена, потому что <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> не был подгружен или подгружен после того, как ты уже вызываешь new Chart().

✅ Решение

Проверь порядок подключения скриптов в HTML. Обязательно:

1. Подключи Chart.js ДО инициализации графика.

2. Убедись, что интернет есть и CDN доступен (или используй локальную версию).

📌 Правильный порядок

html
Копировать код
<!-- 1. Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- 2. Плагин для подписей (опционально) -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

<!-- 3. Твоя инициализация графика -->
<script>
  // Весь код создания Chart здесь
  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
    // ...
  });
</script>

💡 Рекомендация

Чтобы избежать таких проблем, всегда размещай подключение скриптов и Chart-код внизу <body>, или используй событие window.onload:

Вариант 1 — Перенеси код вниз страницы

html
Копировать код
</div> <!-- конец контента -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<script>
// здесь Chart уже будет доступен
</script>
</body>
</html>

Вариант 2 — Используй window.onload

html
Копировать код
<script>
window.onload = function() {
  const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
    // ...
  });
}
</script>

Если всё равно не работает — скинь мне кусок HTML-кода страницы, где ты подключаешь Chart.js и рисуешь график. Я помогу найти точную ошибку.

Спасибо за подробности! Проблема ясна: график отрисовывается, но столбики не видны — скорее всего, из-за неправильного формата чисел в data.

📌 В чём суть проблемы?

Ты передаёшь значения вот так:

js
Копировать код
const data = ["0.00", 0, "0.00", "13 075 966.24", ..., "319 275.00", ...];

📛 Ошибка: большинство значений — строки, и часть из них содержит пробелы и запятые, которые JavaScript не может распарсить как числа.

Chart.js ожидает Number[] (массив чисел), а не строк.

✅ Решение

1. Преобразуй все строки в числа.

2. Удали пробелы (разделители тысяч) и замени запятые на точки, если они есть.

3. Сделай это на PHP стороне или прямо в JS.

✨ Быстрое JS-решение: очистка data

Перед созданием графика добавь:

js
Копировать код
// Очистим строковые значения и преобразуем в числа
const parsedData = data.map(val => {
  if (typeof val === 'string') {
    return parseFloat(val.replace(/\s/g, '').replace(',', '.')) || 0;
  }
  return val;
});

И используй в Chart.js:

js
Копировать код
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: 'Сумма заказов, руб',
      data: parsedData, // <-- уже чистые числа
      backgroundColor: colors,
      borderColor: colors,
      borderWidth: 1,
      borderRadius: 4
    }]
  },
  // ... остальное без изменений
});

📌 Альтернатива: исправить на PHP стороне

Если у тебя суммы из БД и они форматируются через number_format(), то лучше не форматируй их в PHP, а передавай как float:

php
Копировать код
$data[] = floatval($sums_by_status[$stage['stage_lid']] ?? 0);

Итог

✔️ Столбики не рисовались, потому что data содержал строки (и ещё с пробелами).

➡️ После преобразования к числам через parseFloat или правильной генерации из PHP — всё заработает, и график будет видим.

Хочешь — могу выдать полностью рабочий JS или PHP блок с автообработкой.

Да, можно передавать числа как строки в data, но только если они в формате, который JavaScript parseFloat может корректно распознать:

✅ Разрешённые форматы строк:

js
Копировать код
"123456.78"     // допустимо
"0"             // допустимо
"1500.00"       // допустимо

❌ Недопустимые строки:

js
Копировать код
"1 234 567.89"  // пробелы — нельзя
"13 075 966.24" // пробелы — нельзя
"1.000,50"      // запятая как десятичный разделитель — нельзя (для JS это "NaN")
"1 000.50"      // неразрывный пробел (NBSP) — тоже нельзя

⚠ Почему?

JavaScript не умеет распознавать числа с пробелами или локальными форматами, как делает PHP (number_format) или Excel.

Пример:

js
Копировать код
parseFloat("13 075 966.24") // NaN
parseFloat("13075966.24")   // 13075966.24 — корректно

📌 Поэтому, если ты обязан передавать суммы как строки, обязательно:

1. Убери пробелы.

2. Убедись, что десятичный разделитель — точка, не запятая.

🔧 Как это сделать в PHP:

php
Копировать код
// Если суммы форматированы для красоты — убираем это:
$cleaned = str_replace([' ', ' '], '', $formatted_string); // обычный и неразрывный пробел

// Или безопасно преобразуем:
$data[] = floatval(str_replace([' ', ',', ' '], ['', '.', ''], $formatted_string));

✅ Рекомендуемый способ в PHP (передавать как строку, но числовую):

php
Копировать код
$data[] = number_format($sum, 2, '.', ''); // форматирует как "13075.96"

📘 Пример на JS с такими "строковыми" числами

js
Копировать код
const data = ["13075.96", "0.00", "800.00", "2345678.90"]; // такие строки норм

const parsedData = data.map(x => parseFloat(x));

✅ Итог

Да, можно передавать как строки, но только в правильном формате:

• Без пробелов

• С точкой как десятичным разделителем

🔧 Или в JS перед использованием всё же обрабатывай parseFloat() — это надёжнее, особенно если данные могут меняться.

Хочешь — могу показать рабочий пример с "грязными" строками и автоочисткой.

Отлично, давай подстроим твой Chart.js график под дизайн Bootstrap и сразу оптимизируем его для мобильных устройств. Я покажу тебе полный рабочий пример с:

• Адаптивным дизайном (responsive)

• Корректным расположением графика в сетке Bootstrap

• Удобной прокруткой по оси X на мобилке, если этапов много

• Подписями сумм на столбиках (через chartjs-plugin-datalabels)

• Минимальной стилизацией под Bootstrap (контейнеры, отступы и шрифт)

✅ Полный пример: Chart.js + Bootstrap адаптивный график

⚠ Перед использованием убедись, что подключаешь Chart.js и плагин chartjs-plugin-datalabels — это важно для подписей сумм на столбиках.

🔗 HTML + PHP:

html
Копировать код
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>График сумм по этапам</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <!-- Chart.js Plugin for Data Labels -->
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

  <style>
    /* Обёртка с горизонтальной прокруткой для мобильных */
    .chart-container {
      overflow-x: auto;
      padding-bottom: 1rem;
    }

    /* График с минимальной шириной для прокрутки при большом числе столбиков */
    .chart-canvas {
      min-width: 800px;
      height: 400px;
    }

    @media (max-width: 576px) {
      .chart-canvas {
        min-width: 1000px;
        height: 300px;
      }
    }
  </style>
</head>
<body>

<div class="container my-5">
  <h4 class="mb-4">Сумма заказов по этапам</h4>

  <div class="chart-container border rounded p-3 bg-light">
    <canvas id="myChart" class="chart-canvas"></canvas>
  </div>
</div>

<script>
  const labels = <?php echo json_encode($labels); ?>;
  const rawData = <?php echo json_encode($data); ?>;
  const colors = <?php echo json_encode($colors); ?>;

  // Очищаем строки с пробелами и запятыми
  const parsedData = rawData.map(val => {
    if (typeof val === 'string') {
      return parseFloat(val.replace(/\s/g, '').replace(',', '.')) || 0;
    }
    return val;
  });

  const ctx = document.getElementById('myChart').getContext('2d');

  const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: 'Сумма заказов, руб',
        data: parsedData,
        backgroundColor: colors,
        borderColor: colors,
        borderWidth: 1,
        borderRadius: 5
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        datalabels: {
          color: '#000',
          anchor: 'end',
          align: 'start',
          formatter: function(value) {
            return value > 0 ? value.toLocaleString('ru-RU') + ' ₽' : '';
          },
          font: {
            weight: 'bold',
            size: 10
          }
        },
        tooltip: {
          callbacks: {
            label: function(context) {
              return context.parsed.y.toLocaleString('ru-RU') + ' ₽';
            }
          }
        }
      },
      scales: {
        x: {
          ticks: {
            maxRotation: 45,
            minRotation: 45,
            autoSkip: false,
            font: {
              size: 10
            }
          }
        },
        y: {
          beginAtZero: true,
          title: {
            display: true,
            text: 'Сумма (руб)'
          },
          ticks: {
            callback: function(value) {
              return value.toLocaleString('ru-RU') + ' ₽';
            }
          }
        }
      }
    },
    plugins: [ChartDataLabels]
  });
</script>

</body>
</html>

📌 Как это работает

✅ Что ты получишь

• График, который выглядит нативно в Bootstrap интерфейсе

• Красивые подписи сумм на каждом столбике

• Горизонтальную прокрутку, если этапов слишком много

• Читаемость как на десктопе, так и на телефоне

🔧 Возможные улучшения

• Сделать переключение между типами графиков (bar/line)

• Фильтр по дате или статусу

• Отображение количества заказов вместе с суммой

Если хочешь — могу дополнительно сделать collapsible-контейнер с графиком или адаптировать под твою конкретную вёрстку.

Нужно?

Отлично, добавим collapsible-контейнер (сворачиваемый блок) для графика на Bootstrap — так ты сможешь скрывать/показывать график при клике по кнопке.

✅ Что будет

• Кнопка "Показать/Скрыть график"

• Сворачиваемый блок на Bootstrap (collapse)

• График внутри, адаптивный и готовый для мобилок

🔗 Обновлённый пример

html
Копировать код
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>График заказов</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <!-- Chart.js Plugin for Data Labels -->
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

  <style>
    .chart-container {
      overflow-x: auto;
      padding-bottom: 1rem;
    }

    .chart-canvas {
      min-width: 800px;
      height: 400px;
    }

    @media (max-width: 576px) {
      .chart-canvas {
        min-width: 1000px;
        height: 300px;
      }
    }
  </style>
</head>
<body>

<div class="container my-4">

  <!-- Кнопка для открытия/закрытия графика -->
  <button class="btn btn-primary mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#chartCollapse" aria-expanded="false" aria-controls="chartCollapse">
    Показать / Скрыть график заказов
  </button>

  <!-- Сворачиваемый блок с графиком -->
  <div class="collapse" id="chartCollapse">
    <div class="card card-body">
      <div class="chart-container border rounded p-3 bg-light">
        <canvas id="myChart" class="chart-canvas"></canvas>
      </div>
    </div>
  </div>

</div>

<script>
  // Примерные данные (в реальности заменяются PHP)
  const labels = <?php echo json_encode($labels); ?>;
  const rawData = <?php echo json_encode($data); ?>;
  const colors = <?php echo json_encode($colors); ?>;

  // Преобразуем строки с суммами в числа
  const parsedData = rawData.map(val => {
    if (typeof val === 'string') {
      return parseFloat(val.replace(/\s/g, '').replace(',', '.')) || 0;
    }
    return val;
  });

  // Создание графика после загрузки DOM
  document.addEventListener("DOMContentLoaded", function () {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          label: 'Сумма заказов, руб',
          data: parsedData,
          backgroundColor: colors,
          borderColor: colors,
          borderWidth: 1,
          borderRadius: 5
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          datalabels: {
            color: '#000',
            anchor: 'end',
            align: 'start',
            formatter: function(value) {
              return value > 0 ? value.toLocaleString('ru-RU') + ' ₽' : '';
            },
            font: {
              weight: 'bold',
              size: 10
            }
          },
          tooltip: {
            callbacks: {
              label: function(context) {
                return context.parsed.y.toLocaleString('ru-RU') + ' ₽';
              }
            }
          }
        },
        scales: {
          x: {
            ticks: {
              maxRotation: 45,
              minRotation: 45,
              autoSkip: false,
              font: {
                size: 10
              }
            }
          },
          y: {
            beginAtZero: true,
            title: {
              display: true,
              text: 'Сумма (руб)'
            },
            ticks: {
              callback: function(value) {
                return value.toLocaleString('ru-RU') + ' ₽';
              }
            }
          }
        }
      },
      plugins: [ChartDataLabels]
    });
  });
</script>

</body>
</html>

✅ Как это работает

🔧 Что ты можешь менять

• Изменить кнопку на иконку, текст или добавить "по умолчанию открыто"

• Добавить график по количеству заказов отдельно

• Сделать анимацию при открытии, если хочешь

Если тебе нужно, чтобы график перерисовывался при открытии (например, если он не сразу виден) — скажи, добавим отложенную инициализацию. Хочешь это?

Отличная идея 💡 — добавим переключатель типа графика (bar/line) на Bootstrap. Это удобно, если ты хочешь видеть:

• "Bar" (столбцы) — наглядно отображают сумму на каждом этапе.

• "Line" (линия) — подчёркивает динамику по этапам.

✅ Что мы сделаем:

• Добавим кнопку-переключатель (или select) для выбора типа графика.

• Обновим Chart.js без перерисовки всей страницы.

• Сохраним адаптивность и поддержку collapse.

🔧 Обновлённый код с переключателем

Вставь этот код вместо предыдущего JavaScript + HTML-кнопки:

🔗 HTML — добавим селектор типа графика

html
Копировать код
<div class="container my-4">

  <!-- Переключатель типа графика -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#chartCollapse" aria-expanded="false" aria-controls="chartCollapse">
      Показать / Скрыть график
    </button>

    <div>
      <label for="chartTypeSelect" class="form-label me-2 mb-0">Тип графика:</label>
      <select id="chartTypeSelect" class="form-select d-inline-block w-auto">
        <option value="bar" selected>Столбчатый</option>
        <option value="line">Линейный</option>
      </select>
    </div>
  </div>

  <!-- Сворачиваемый блок с графиком -->
  <div class="collapse show" id="chartCollapse">
    <div class="card card-body">
      <div class="chart-container border rounded p-3 bg-light">
        <canvas id="myChart" class="chart-canvas"></canvas>
      </div>
    </div>
  </div>
</div>

📜 JS — переключение графика

html
Копировать код
<script>
  const labels = <?php echo json_encode($labels); ?>;
  const rawData = <?php echo json_encode($data); ?>;
  const colors = <?php echo json_encode($colors); ?>;

  const parsedData = rawData.map(val => {
    if (typeof val === 'string') {
      return parseFloat(val.replace(/\s/g, '').replace(',', '.')) || 0;
    }
    return val;
  });

  let chartInstance = null;

  function createChart(type = 'bar') {
    const ctx = document.getElementById('myChart').getContext('2d');

    // Удаляем предыдущий график, если был
    if (chartInstance) {
      chartInstance.destroy();
    }

    chartInstance = new Chart(ctx, {
      type: type,
      data: {
        labels: labels,
        datasets: [{
          label: 'Сумма заказов, руб',
          data: parsedData,
          backgroundColor: type === 'bar' ? colors : 'rgba(100, 100, 255, 0.3)',
          borderColor: colors,
          borderWidth: 2,
          borderRadius: type === 'bar' ? 5 : 0,
          tension: 0.3, // сглаживание линии
          fill: false,
          pointBackgroundColor: colors,
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          datalabels: {
            display: true,
            color: '#000',
            anchor: 'end',
            align: 'start',
            formatter: function(value) {
              return value > 0 ? value.toLocaleString('ru-RU') + ' ₽' : '';
            },
            font: {
              weight: 'bold',
              size: 10
            }
          },
          tooltip: {
            callbacks: {
              label: function(context) {
                return context.parsed.y.toLocaleString('ru-RU') + ' ₽';
              }
            }
          }
        },
        scales: {
          x: {
            ticks: {
              maxRotation: 45,
              minRotation: 45,
              autoSkip: false,
              font: {
                size: 10
              }
            }
          },
          y: {
            beginAtZero: true,
            title: {
              display: true,
              text: 'Сумма (руб)'
            },
            ticks: {
              callback: function(value) {
                return value.toLocaleString('ru-RU') + ' ₽';
              }
            }
          }
        }
      },
      plugins: [ChartDataLabels]
    });
  }

  // Первичная инициализация
  document.addEventListener("DOMContentLoaded", function () {
    createChart('bar');

    // Слушаем изменение селектора типа графика
    document.getElementById('chartTypeSelect').addEventListener('change', function () {
      const selectedType = this.value;
      createChart(selectedType);
    });
  });
</script>

✅ Что поддерживается:

🛠️ Что можно добавить:

• Сохранять выбранный тип графика в localStorage

• Добавить дополнительные типы (например, radar, area, doughnut)

• Переключать не только type, но и данные (суммы vs количество заказов)

Хочешь — покажу пример с двумя кнопками ("Суммы" и "Количество заказов") или переключение между разными наборами данных.

Отлично! Сейчас покажу рабочий пример, где есть:

✅ Переключение между:

• Суммами заказов (₽)

• Количеством заказов (шт)

🔧 Что будет:

✅ Пример: HTML + JS + PHP

php
Копировать код
<?php
// Примерные данные
$labels = ["Новый", "ОПИ", "КП отправлено", "Договор", "Отгрузка"];
$colors = ["#79c4f7", "#73d3f2", "#6de3c7", "#f7cd7b", "#44a46d"];

$sum_data = ["100000", "200000", "350000", "150000", "0"];
$count_data = [3, 4, 10, 2, 0];
?>

🔗 HTML + JavaScript

html
Копировать код
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>График заказов</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

  <style>
    .chart-container {
      overflow-x: auto;
      padding-bottom: 1rem;
    }
    .chart-canvas {
      min-width: 800px;
      height: 400px;
    }
    @media (max-width: 576px) {
      .chart-canvas {
        min-width: 1000px;
        height: 300px;
      }
    }
  </style>
</head>
<body>

<div class="container my-4">

  <!-- Верхняя панель -->
  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
    <div>
      <button id="btnSum" class="btn btn-outline-primary active me-2">Суммы</button>
      <button id="btnCount" class="btn btn-outline-secondary">Количество</button>
    </div>

    <div>
      <label for="chartTypeSelect" class="form-label me-2 mb-0">Тип графика:</label>
      <select id="chartTypeSelect" class="form-select d-inline-block w-auto">
        <option value="bar" selected>Столбчатый</option>
        <option value="line">Линейный</option>
      </select>
    </div>

    <button class="btn btn-primary ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#chartCollapse">
      Показать / Скрыть
    </button>
  </div>

  <!-- Сворачиваемый блок с графиком -->
  <div class="collapse show" id="chartCollapse">
    <div class="card card-body">
      <div class="chart-container border rounded p-3 bg-light">
        <canvas id="myChart" class="chart-canvas"></canvas>
      </div>
    </div>
  </div>
</div>

<script>
  const labels = <?php echo json_encode($labels); ?>;
  const colors = <?php echo json_encode($colors); ?>;
  const rawSums = <?php echo json_encode($sum_data); ?>;
  const rawCounts = <?php echo json_encode($count_data); ?>;

  const sumData = rawSums.map(val => parseFloat(val.replace(/\s/g, '').replace(',', '.')) || 0);
  const countData = rawCounts.map(val => parseInt(val) || 0);

  let currentDataset = 'sum'; // 'sum' или 'count'
  let currentChartType = 'bar';
  let chartInstance = null;

  function createChart(datasetType, chartType) {
    const ctx = document.getElementById('myChart').getContext('2d');

    // Удаляем старый график
    if (chartInstance) chartInstance.destroy();

    const isSum = datasetType === 'sum';
    const dataSet = isSum ? sumData : countData;

    chartInstance = new Chart(ctx, {
      type: chartType,
      data: {
        labels: labels,
        datasets: [{
          label: isSum ? 'Сумма заказов, руб' : 'Количество заказов',
          data: dataSet,
          backgroundColor: chartType === 'bar' ? colors : 'rgba(100, 100, 255, 0.3)',
          borderColor: colors,
          borderWidth: 2,
          borderRadius: chartType === 'bar' ? 5 : 0,
          tension: 0.3,
          fill: false,
          pointBackgroundColor: colors,
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          datalabels: {
            color: '#000',
            anchor: 'end',
            align: 'start',
            formatter: function(value) {
              return value > 0 ? (isSum ? value.toLocaleString('ru-RU') + ' ₽' : value + ' шт') : '';
            },
            font: {
              weight: 'bold',
              size: 10
            }
          },
          tooltip: {
            callbacks: {
              label: function(context) {
                return isSum
                  ? context.parsed.y.toLocaleString('ru-RU') + ' ₽'
                  : context.parsed.y + ' заказов';
              }
            }
          }
        },
        scales: {
          x: {
            ticks: {
              maxRotation: 45,
              minRotation: 45,
              autoSkip: false,
              font: { size: 10 }
            }
          },
          y: {
            beginAtZero: true,
            title: {
              display: true,
              text: isSum ? 'Сумма (руб)' : 'Количество (шт)'
            },
            ticks: {
              callback: function(value) {
                return isSum
                  ? value.toLocaleString('ru-RU') + ' ₽'
                  : value + ' шт';
              }
            }
          }
        }
      },
      plugins: [ChartDataLabels]
    });
  }

  document.addEventListener("DOMContentLoaded", () => {
    // Первая отрисовка
    createChart(currentDataset, currentChartType);

    // Селектор типа графика
    document.getElementById('chartTypeSelect').addEventListener('change', function () {
      currentChartType = this.value;
      createChart(currentDataset, currentChartType);
    });

    // Кнопка "Суммы"
    document.getElementById('btnSum').addEventListener('click', () => {
      currentDataset = 'sum';
      createChart(currentDataset, currentChartType);
      document.getElementById('btnSum').classList.add('btn-primary', 'active');
      document.getElementById('btnSum').classList.remove('btn-outline-primary');
      document.getElementById('btnCount').classList.remove('btn-primary', 'active');
      document.getElementById('btnCount').classList.add('btn-outline-secondary');
    });

    // Кнопка "Количество"
    document.getElementById('btnCount').addEventListener('click', () => {
      currentDataset = 'count';
      createChart(currentDataset, currentChartType);
      document.getElementById('btnCount').classList.add('btn-primary', 'active');
      document.getElementById('btnCount').classList.remove('btn-outline-secondary');
      document.getElementById('btnSum').classList.remove('btn-primary', 'active');
      document.getElementById('btnSum').classList.add('btn-outline-primary');
    });
  });
</script>

</body>
</html>

✅ Что можно ещё добавить:

• Поддержку сохранения выбранного типа в localStorage

• Автоматическую загрузку данных с сервера через AJAX

• Возможность выбрать временной диапазон (месяц/год)

Если хочешь, я могу адаптировать это:

• Под твой PHP-код, где $orders идут из SQLite

• Под твой текущий стиль (например, заменить на иконки вместо текста)

• Добавить третью кнопку — например, "Средний чек"

Хочешь?

Отличный выбор — добавим кнопку "Средний чек", и у тебя будет полноценное переключение между тремя метриками:

✅ Что будет:

🧠 Логика:

• Средний чек = сумма / кол-во, если кол-во > 0, иначе 0

• Отображаем в ₽, как и суммы

• Тоже переключаем тип графика: bar или line

🔧 Изменения к предыдущему коду:

Тебе нужно:

1. Добавить кнопку Средний чек в HTML

2. Добавить данные и логику в JS

✅ Обновлённый HTML (панель кнопок)

Заменить вот этот блок:

html
Копировать код
<!-- Верхняя панель -->
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
  <div class="btn-group" role="group" aria-label="Тип данных">
    <button id="btnSum" class="btn btn-outline-primary active">Суммы</button>
    <button id="btnCount" class="btn btn-outline-secondary">Количество</button>
    <button id="btnAvg" class="btn btn-outline-secondary">Средний чек</button>
  </div>

  <div>
    <label for="chartTypeSelect" class="form-label me-2 mb-0">Тип графика:</label>
    <select id="chartTypeSelect" class="form-select d-inline-block w-auto">
      <option value="bar" selected>Столбчатый</option>
      <option value="line">Линейный</option>
    </select>
  </div>

  <button class="btn btn-primary ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#chartCollapse">
    Показать / Скрыть
  </button>
</div>

✅ Обновлённый JS

В скрипт добавь это:

📌 1. Расчёт среднего чека

js
Копировать код
const avgData = sumData.map((sum, i) => {
  const count = countData[i];
  return count > 0 ? +(sum / count).toFixed(2) : 0;
});

Добавь его сразу после sumData и countData.

📌 2. Обнови функцию createChart

Изменим строку:

js
Копировать код
const isSum = datasetType === 'sum';
const dataSet = isSum ? sumData : countData;

на:

js
Копировать код
let dataSet, isSum = false, isCount = false, isAvg = false;

if (datasetType === 'sum') {
  dataSet = sumData;
  isSum = true;
} else if (datasetType === 'count') {
  dataSet = countData;
  isCount = true;
} else {
  dataSet = avgData;
  isAvg = true;
}

📌 3. Обнови подписи (в той же функции createChart)

В блоке datalabels.formatter:

js
Копировать код
formatter: function(value) {
  if (value <= 0) return '';
  return isSum || isAvg
    ? value.toLocaleString('ru-RU') + ' ₽'
    : value + ' шт';
}

В блоке tooltip.callbacks.label:

js
Копировать код
label: function(context) {
  const val = context.parsed.y;
  return isSum
    ? val.toLocaleString('ru-RU') + ' ₽'
    : isCount
      ? val + ' заказов'
      : val.toLocaleString('ru-RU') + ' ₽ (средний чек)';
}

В блоке y.title.text:

js
Копировать код
text: isSum ? 'Сумма (руб)' : isCount ? 'Количество (шт)' : 'Средний чек (руб)'

📌 4. Добавь обработчик для кнопки "Средний чек"

После btnCount.addEventListener вставь:

js
Копировать код
document.getElementById('btnAvg').addEventListener('click', () => {
  currentDataset = 'avg';
  createChart(currentDataset, currentChartType);

  document.getElementById('btnSum').classList.remove('btn-primary', 'active');
  document.getElementById('btnSum').classList.add('btn-outline-primary');
  document.getElementById('btnCount').classList.remove('btn-primary', 'active');
  document.getElementById('btnCount').classList.add('btn-outline-secondary');
  document.getElementById('btnAvg').classList.add('btn-primary', 'active');
  document.getElementById('btnAvg').classList.remove('btn-outline-secondary');
});

✅ Результат

Ты получишь 3 переключателя:

• ✅ Суммы — например, "350 000 ₽"

• ✅ Количество — "8 заказов"

• ✅ Средний чек — "43 750 ₽"

Если хочешь, могу:

• 💾 Сохранять выбор (тип данных/графика) в localStorage

• 📈 Добавить отображение динамики (рост/падение)

• 📤 Сформировать экспорт в Excel или PNG

Готов показать?

Отлично! Давай по порядку реализуем все 3 пункта, которые ты хочешь:

✅ 1. Сохраняем выбор в localStorage

Чтобы при обновлении страницы:

• оставался выбранный тип графика (bar или line)

• и выбранная метрика (суммы, кол-во, средний чек)

🔧 Изменения в JS:

В начале скрипта:

js
Копировать код
let currentDataset = localStorage.getItem('chart_dataset') || 'sum';
let currentChartType = localStorage.getItem('chart_type') || 'bar';

В обработчиках кнопок/селектора — сохраняем:

js
Копировать код
// Селектор типа графика
document.getElementById('chartTypeSelect').addEventListener('change', function () {
  currentChartType = this.value;
  localStorage.setItem('chart_type', currentChartType);
  createChart(currentDataset, currentChartType);
});

// Кнопка "Суммы"
document.getElementById('btnSum').addEventListener('click', () => {
  currentDataset = 'sum';
  localStorage.setItem('chart_dataset', currentDataset);
  createChart(currentDataset, currentChartType);
  updateButtonStyles();
});

// Кнопка "Количество"
document.getElementById('btnCount').addEventListener('click', () => {
  currentDataset = 'count';
  localStorage.setItem('chart_dataset', currentDataset);
  createChart(currentDataset, currentChartType);
  updateButtonStyles();
});

// Кнопка "Средний чек"
document.getElementById('btnAvg').addEventListener('click', () => {
  currentDataset = 'avg';
  localStorage.setItem('chart_dataset', currentDataset);
  createChart(currentDataset, currentChartType);
  updateButtonStyles();
});

Функция updateButtonStyles() — централизованная логика:

js
Копировать код
function updateButtonStyles() {
  const btnSum = document.getElementById('btnSum');
  const btnCount = document.getElementById('btnCount');
  const btnAvg = document.getElementById('btnAvg');

  [btnSum, btnCount, btnAvg].forEach(btn => {
    btn.classList.remove('btn-primary', 'active');
    btn.classList.add('btn-outline-secondary');
  });

  if (currentDataset === 'sum') {
    btnSum.classList.add('btn-primary', 'active');
    btnSum.classList.remove('btn-outline-secondary');
  } else if (currentDataset === 'count') {
    btnCount.classList.add('btn-primary', 'active');
    btnCount.classList.remove('btn-outline-secondary');
  } else {
    btnAvg.classList.add('btn-primary', 'active');
    btnAvg.classList.remove('btn-outline-secondary');
  }
}

При загрузке страницы:

js
Копировать код
document.addEventListener("DOMContentLoaded", () => {
  document.getElementById('chartTypeSelect').value = currentChartType;
  updateButtonStyles();
  createChart(currentDataset, currentChartType);
});

✅ 2. Динамика (рост/падение) 📈

Мы можем:

• Подсветить столбики цветами в зависимости от изменения

• Либо добавить стрелки ⬆️ / ⬇️ над значениями (или в тултип)

Предлагаю простой пример: показываем стрелку в тултипе, если значение увеличилось по сравнению с предыдущим.

В tooltip.callbacks.label:

js
Копировать код
label: function(context) {
  const index = context.dataIndex;
  const val = context.parsed.y;
  let arrow = '';
  if (index > 0) {
    const prevVal = context.chart.data.datasets[0].data[index - 1];
    if (val > prevVal) arrow = ' ⬆️';
    else if (val < prevVal) arrow = ' ⬇️';
  }

  return isSum
    ? val.toLocaleString('ru-RU') + ' ₽' + arrow
    : isCount
      ? val + ' заказов' + arrow
      : val.toLocaleString('ru-RU') + ' ₽ (средний чек)' + arrow;
}

Можно также:

• Сделать цвет стрелки зелёный/красный

• Или заменить на иконки/цвета баров

Хочешь продвинутую визуализацию — подскажу как.

✅ 3. Экспорт 📤 (PNG / Excel)

📸 Экспорт в PNG

Добавим кнопку, чтобы сохранить график как изображение:

HTML:

html
Копировать код
<button id="exportPNG" class="btn btn-outline-success ms-2">📸 PNG</button>

JS:

js
Копировать код
document.getElementById('exportPNG').addEventListener('click', () => {
  const a = document.createElement('a');
  a.href = chartInstance.toBase64Image();
  a.download = 'chart.png';
  a.click();
});

📊 Экспорт в Excel (через CSV)

Экспортируем данные в .csv, который Excel легко открывает.

HTML:

html
Копировать код
<button id="exportCSV" class="btn btn-outline-warning ms-2">📊 Excel (CSV)</button>

JS:

js
Копировать код
document.getElementById('exportCSV').addEventListener('click', () => {
  let csv = 'Этап;Значение\n';
  chartInstance.data.labels.forEach((label, i) => {
    const val = chartInstance.data.datasets[0].data[i];
    csv += `"${label}";"${val}"\n`;
  });

  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.setAttribute('download', 'chart_data.csv');
  link.click();
});

🔚 ИТОГ

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

Если хочешь:

• экспорт в XLSX (реальный Excel),

• подписи с иконками 💹 или % прироста,

• смену темы (тёмная/светлая),

я тоже помогу ✌️

Готов собрать финальный шаблон с полной интеграцией?