Блог

Главная - Вопросы по программированию - Laravel 8 Консоли / Диаграммы 7 Реализация параметров Chartjs

Laravel 8 Консоли / Диаграммы 7 Реализация параметров Chartjs

#charts #package #chart.js #laravel-8 #php-7.4

Вопрос:

В настоящее время я обновляю CONSOLETV / Диаграммы с 6 по 7. Диаграмма отображается с ожидаемыми данными.
Диаграмма не отображается в соответствии с какой-либо из заданных options клавиш объекта для point style круга условных обозначений, padding топ-50, отображение оси » y » и «x» labelString , не отображается gridlines , позиционирование datalabels в конце со смещением начала жирным и зеленым цветом :

         const chart = new Chartisan({
            el: '#test_chart',
            url: "@chart('test_chart_route')",
            hooks: new ChartisanHooks()
            .colors()
            .datasets(
                [
                    { type: 'line', fill: false, borderColor: '#329865', backgroundColor: '#329865' }, 
                    { type: 'line', fill: false, borderColor: '#1e5b3c', backgroundColor: '#1e5b3c' },
                    { type: 'line', fill: false, borderColor: '#0f2d1e', backgroundColor: '#0f2d1e' }, 
                    { type: 'line', fill: false, borderColor: '#329865', backgroundColor: '#329865' }, 
                    { type: 'line', fill: false, borderColor: '#1e5b3c', backgroundColor: '#1e5b3c' },
                    { type: 'line', fill: false, borderColor: '#0f2d1e', backgroundColor: '#0f2d1e' }, 
                    { type: 'line', fill: false, borderColor: '#800000', backgroundColor: '#800000' }, 
                    { type: 'line', fill: false, borderColor: '#F70000', backgroundColor: '#F70000' },
                    { type: 'line', fill: false, borderColor: '#FF6F6F', backgroundColor: '#FF6F6F' }, 
                    { type: 'line', fill: false, borderColor: '#800000', backgroundColor: '#800000' }, 
                    { type: 'line', fill: false, borderColor: '#F70000', backgroundColor: '#F70000' },
                    { type: 'line', fill: false, borderColor: '#FF6F6F', backgroundColor: '#FF6F6F' },
                ]
            ),
            options: {
                        layout: {
                            padding: {
                                left: 0,
                                right: 0,
                                top: 50,
                                bottom: 0
                            },
                        },
                        aspectRatio: 1,
                        maintainAspectRatio: false,
                        responsive: true,
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                usePointStyle: true,
                                fontSize: 12,
                            },
                        },
                        elements: {
                            point: {
                                pointStyle: 'circle',
                            }
                        },
                        scales: {
                            xAxes: [{
                                    maxBarThickness: 120,
                                    scaleLabel: {
                                        display: true,
                                        labelString: "xAxes_label"
                                    },
                                    gridLines: {
                                        display: false
                                    },
                                    ticks: {
                                        fontSize: 10,
                                        maxRotation: 80,
                                        minRotation: 80,
                                        padding: 2
                                    },
                            }],
                            yAxes: [{
                                    scaleLabel: {
                                        display: true,
                                        labelString: "yAxes_label"
                                    },
                                    gridLines: {
                                        display: false,
                                        drawBorder: false
                                    },
                                    ticks: {
                                        display: true,
                                        fontSize: 10,
                                        suggestedMin: 0
                                    },
                            }],
                        },
                        plugins: {
                            datalabels: {
                                color: '#ff0a6c',
                                labels: {
                                    title: {
                                        font: {
                                            weight: 'bold',
                                            size: 11,
                                        }
                                    },
                                    value: {
                                        color: 'green'
                                    }
                                },
                                formatter: function(value, context) {
                                    return (value != '' amp;amp; value !== undefined) ? Math.round(value * 100) / 100 : value;
                                },
                                anchor: 'end',
                                align: 'start',
                                display: 'auto',
                                clamp: false
                            }
                        }
                    }
        });

Я также пробовал использовать этот ChartisanHooks().options({...options...}) метод без изменения параметров набора.

Кто-нибудь может, пожалуйста, показать мне правильное направление?

Ответ №1:

Вместо использования options крючка вы определили options его как свойство. Вы должны использовать .options({ ... }) , но не options: { ... } .

options Крючок, однако, не работает для меня, возможно, я использую устаревшую Chartisan библиотеку. В соответствии с пользовательскими крючками вы также можете объединить options их в диаграмму следующим образом:

 .custom(function({ data, merge }) {
   return merge(data, {
     options: {
       ...
     }
   }),
})

Пожалуйста, взгляните на свой исправленный и выполняемый код ниже и посмотрите, как он работает с этой merge функцией.

 const chart = new Chartisan({
  el: '#test_chart',
  data: {
    "chart": {
      "labels": ["First", "Second", "Third"]
    },
    "datasets": [{
        "name": "Sample 1",
        "values": [10, 3, 7]
      },
      {
        "name": "Sample 2",
        "values": [1, 6, 2]
      }
    ]
  },
  hooks: new ChartisanHooks()
    .colors()
    .datasets(
      [{
          type: 'line',
          fill: false,
          borderColor: '#329865',
          backgroundColor: '#329865'
        },
        {
          type: 'line',
          fill: false,
          borderColor: '#1e5b3c',
          backgroundColor: '#1e5b3c'
        }
      ]
    )
    .custom(function({ data, merge }) {
      return merge(data, {
        options: {
          layout: {
            padding: {
              left: 0,
              right: 0,
              top: 50,
              bottom: 0
            },
          },
          aspectRatio: 1,
          maintainAspectRatio: false,
          responsive: true,
          legend: {
            display: true,
            position: 'top',
            labels: {
              usePointStyle: true,
              fontSize: 12,
            },
          },
          elements: {
            point: {
              pointStyle: 'circle',
            }
          },
          scales: {
            xAxes: [{
              maxBarThickness: 120,
              scaleLabel: {
                display: true,
                labelString: "xAxes_label"
              },
              gridLines: {
                display: false
              },
              ticks: {
                fontSize: 10,
                maxRotation: 80,
                minRotation: 80,
                padding: 2
              },
            }],
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: "yAxes_label"
              },
              gridLines: {
                display: false,
                drawBorder: false
              },
              ticks: {
                display: true,
                fontSize: 10,
                suggestedMin: 0
              },
            }],
          },
          plugins: {
            datalabels: {
              color: '#ff0a6c',
              labels: {
                title: {
                  font: {
                    weight: 'bold',
                    size: 11,
                  }
                },
                value: {
                  color: 'green'
                }
              },
              formatter: function(value, context) {
                return (value != '' amp;amp; value !== undefined) ? Math.round(value * 100) / 100 : value;
              },
              anchor: 'end',
              align: 'start',
              display: 'auto',
              clamp: false
            }
          }
        }
      });
    }),
}); 
 <script src="https://unpkg.com/chart.js@2.9.4/dist/Chart.min.js"></script>
<script src="https://unpkg.com/@chartisan/chartjs@^2.1.0/dist/chartisan_chartjs.umd.js"></script>
<div id="test_chart" style="height: 300px;"></div>

Комментарии:

1.Спасибо. Это работает. В документации действительно говорится, что пользователь должен скорее использовать options ChartisanHooks метод, чем custom метод. Этот пользовательский метод сделал пакет немного лучше, чем его предшественник. Супер проста в использовании, обновление-это взрыв, это просто крутая кривая обучения для быстрого развития и, насколько я вижу, не позволяет локализовать маршрут. Может быть, вы знаете, почему внутренний advancedDataset метод не использует extra массивы конфигурации набора данных аргументов на интерфейсе?

2. @Hmerman6006: Рад, что это работает для вас! К сожалению, я не могу ответить на ваш вопрос по поводу advancedDataset .

Метки: