Question

我正在使用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: {
                    }
                }]
            }
        }
});

Answer 1

您可以使用map功能突出显示周末：

http://jsfiddle.net/75apft3m/

此外，您可以使用最低和最高值进行相同操作。但是为此，您必须将该数组存储在某个位置。像这样：

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

只需使用Math.max.apply(null, dataArray) 和Math.min.apply(null, dataArray)来查找最高和最低值：）

ChartJS-突出显示周末以及最低和最高价值

1 个答案: