ChartJS - выделите выходные и самые низкие и самые высокие значения - PullRequest
Новая
       13

ChartJS - выделите выходные и самые низкие и самые высокие значения

1 голос
/ 07 июня 2019

Я использую ChartJS, и я хотел бы выделить все субботы и воскресенья другим цветом - я бы также подсветил, чтобы выделить самые высокие и самые низкие значения на графике.

Возможно ли это?

Пока скрипка: http://jsfiddle.net/3wku56Lq/

new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
    labels: ['14 May 2019 (Tue)', '15 May 2019 (Wed)', '16 May 2019 (Thu)', '17 May 2019 (Fri)', '18 May 2019 (Sat)', '19 May 2019 (Sun)', '20 May 2019 (Mon)', '21 May 2019 (Tue)', '22 May 2019 (Wed)', '23 May 2019 (Thu)', '24 May 2019 (Fri)', '25 May 2019 (Sat)', '26 May 2019 (Sun)', '27 May 2019 (Mon)', '28 May 2019 (Tue)', '29 May 2019 (Wed)', '30 May 2019 (Thu)', '31 May 2019 (Fri)', '01 Jun 2019 (Sat)', '02 Jun 2019 (Sun)', '03 Jun 2019 (Mon)', '04 Jun 2019 (Tue)', '05 Jun 2019 (Wed)', '06 Jun 2019 (Thu)', '07 Jun 2019 (Fri)'],
    datasets: [{
        data: [25738, 25261, 25499, 24178, 12400, 13356, 26033, 26588, 25018, 22972, 21702, 11232, 11617, 14308, 24212, 23949, 23708, 21511, 11545, 13836, 25536, 26824, 0, 0, 0],
        label: "Impressions",
            backgroundColor: 'rgb(199, 199, 199, 0.7)',
            borderColor: 'rgb(199, 199, 199)',
        fill: true
      }
    ]
  },
options: {
            tooltips: {
              callbacks: {
                    label: function(tooltipItem, data) {
                        var value = data.datasets[0].data[tooltipItem.index];
                        value = value.toString();
                        value = value.split(/(?=(?:...)*$)/);
                        value = value.join(',');
                        return value;
                    }
              } // end callbacks:
            }, //end tooltips
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                        userCallback: function(value, index, values) {
                            // Convert the number to a string and splite the string every 3 charaters from the end
                            value = value.toString();
                            value = value.split(/(?=(?:...)*$)/);
                            value = value.join(',');
                            return value;
                        }
                    }
                }],
                xAxes: [{
                    ticks: {
                    }
                }]
            }
        }
});

1 Ответ

0 голосов
/ 07 июня 2019

Вы можете выделить выходные, используя map функции:

http://jsfiddle.net/75apft3m/

Также вы можете сделать то же самое с самым низким и самым высоким значением.Но для этого вы должны где-то хранить эти массивы.Например:

http://jsfiddle.net/75apft3m/1/

Просто используйте Math.max.apply(null, dataArray) и Math.min.apply(null, dataArray), чтобы найти самые высокие и самые низкие значения:)

...