Использование переменной в метках Chart.js карты Массив - PullRequest
0 голосов
/ 15 октября 2019

Я перепробовал почти все, но больше не знаю, как решить эту проблему. Я получаю свои данные из API в php в javascript в этом случае, я использую график chart.js, где я хочу применитьраз автоматически для меток, но я не понимаю, как использовать переменную моего массива карты в моих метках chart.js

function drawChartHistoryTimelineGateWayAll_hours(dataFromAjax){

 var time = dataFromAjax.data.data1.map(function(innerData) {
    return innerData.map(function(row){
        return moment(row[11], 'YYYY-MM-DD HH:mm:ss').format('HH:mm:ss');
    });
 });

 var myChartObject = document.getElementById('myChartHistory');
 var chart = new Chart(myChartObject,{
    type: 'line',
    data: {
        labels: [timeDisplay],--------->I need to use the variable here
        datasets: [{
            label: "GATEWAY1",
            fill: true,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            data: [25,45,65] //Daten müssen Konfiguriert werden
        },
 }
}

1 Ответ

0 голосов
/ 15 октября 2019

Для реализации пользовательской метки существует плагин chartjs с именем datalabels, который можно импортировать с помощью cdn

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

или с помощью npm

npm i chartjs-plugin-datalabels

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


 let x = [],
              y = [];
            data.forEach(z => {
              let date = new Date(z.dateT)
              x.push(date.toLocaleDateString());
            });

            var myLineChart = new Chart(ctx, {
              plugins: [ChartDataLabels],  
              type: "bar",
              data: {
                labels: x,
                datasets: [
                  {
                    data: y,
                    backgroundColor: [
                      "rgba(255, 99, 132, 0.2)",
                      "rgba(54, 162, 235, 0.2)",
                      "rgba(255, 206, 86, 0.2)",
                      "rgba(75, 192, 192, 0.2)",
                      "rgba(153, 102, 255, 0.2)",
                      "rgba(255, 159, 64, 0.2)",
                      "rgba(211, 84, 0,0.8)"
                    ]
                  }
                ]
              },
              options: options
            });
          }
        };
    ````


Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...