Przejdź do głównej treści

Podmiana kolorów w wykresie

Ready_™ Developer TeamMniej niż 1 minuta

Wersja wprowadza małe usprawnienia do eWykresów:

  • możliwość definicji koloru dla serii danych bezpośrednio z definicji raportu - dokonujemy tego poprzez wpisane do kolumny Parametry serii danych (zakładka Kolumny na kartotece Raportu) wartości JSON **{"color": "red"}**
  • podziałka osi Y pokazuje tylko całkowite liczby - bez możliwości zmiany

Własny wykres za pomocą eCharts i danych pobranych z bazy plus zmiana kolorów.

Jedziemy 😃 Nie trzeba żadnych require robić itd.

$canvasID = $this->name.'asdasdasd'; // nazwa pola (<div id="'.$canvasID.'">...) gdzie pojawi się wykres

$renderer = new ChartRenderer\ChartRenderer($canvasID, [], ChartRenderer\Renderer\Renderer::ECHARTS_RENDERER);

$chartTypes = $renderer->getSupportedChartTypes(); // wszystkie możliwe typy wykresów z opisami
$echartType = 'BasicBar'; // przykładowy typ wykresu jako słupki

$data = [
    [
        'company' => 'COMPANY 1',
        'week1' => 14,
        'week2' => 16,
    ],
    [
        'company' => 'COMPANY 2',
        'week1' => 22,
        'week2' => 19,
    ],
    [
        'company' => 'COMPANY 3',
        'week1' => 4,
        'week2' => 7,
    ],
]; // tablica danych zwrócona bezpośrednio z bazy danych gdzie pierwsza kolumna to wartość osi X a wszystko pozostałe to wartości Y

$columnsFormat = [
    'company' => [
        'label' => ''
    ],
    'week1' => [
        'label' => 'Tydzień 1',
        'color' => 'pink',
    ],
    'week2' => [
        'label' => 'Tydzień 2'
    ],
]; // to tablica z opisami serii danych

$series = $renderer->prepareSeries($data, $columnsFormat);
if ($series) {
    $chart = $renderer->setChartType($echartType);

    $renderer->setSeries($series);
    $renderer->prepare(['series' => $columnsFormat]);

    $chart->color = ['#91c7ae','#749f83']; // ustawia inne kolory dla serii danych jeśli nie ustawiono w $columnsFormat

    // istnieje również sposób ręcznego nadania koloru dla kolumny
    $week1Series = $chart->getSeriesByColumnName('week1');
    $chart->setSeriesColor($week1Series, '#d83a6e');

    $renderer->toHtml();
}