javascript - Chart.js 下拉菜单选择 1 天、昨天和 7 天

Question

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"
    integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
    
    <div class="chart" style="position: relative; height:50vh; width:100%;margin: 0 auto;;">
    <canvas id="myChart" width="400" height="400"></canvas></div>
    <select id="date-choose">
        <option value="Today">Today</option>
        <option value="Yesterday">Yesterday</option>
        <option value="7 Days">Last 7 Days</option>
      </select>

<script>
    function BuildChart(labels, values, chartTitle) {
        var data = {
            labels: labels,
            datasets: [{
                label: chartTitle, // Name the series
                data: values,
                backgroundColor: [
                    'rgba(50, 99, 231, 0.2)',
                    'rgba(50, 90, 231, 0.2)',
                    'rgba(50, 90, 231, 0.2)',
                    'rgba(50, 90, 231, 0.2)',
                    'rgba(50, 90, 231, 0.2)',
                    'rgba(50, 90, 231, 0.2)'
                ],
                borderColor: [
                    'rgba(50, 90, 231, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(50, 90, 231, 1)',
                    'rgba(50, 90, 231, 1)',
                    'rgba(50, 90, 231, 1)',
                    'rgba(50, 90, 231, 1)'
                ],
                borderWidth: 1
            }],
        };


        Chart.defaults.global.defaultFontColor = '#151515';
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: {
                responsive: true, // Instruct chart js to respond nicely.
                maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
                scales: {
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: ''
                        }
                    }],
                    yAxes: [{
                        ticks: {
            callback: function(value, index, values) {
                if (Math.floor(value) === value) {
                    return value;
                }
            }
      }
                    }]
                },
            }
        });
        //$('#legend').html(myChart.generateLegend());
        return myChart;
    }



    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var json = JSON.parse(this.response);
            console.log(json);

            // Map json labels  back to values array
            var labels = json.feed.entry.map(function (e) {
                return e.gsx$date.$t;
            });

            // Map json values back to values array
            var values = json.feed.entry.map(function (e) {
                return e.gsx$followers.$t;
            });
            for (i = 0; i < values.length; i++) {
                if (values[i].charAt(0) == '-') {
                    values.length = values.length - 1;
                    labels.length = labels.length - 1;
                    
                } else if (values[i].charAt(0) == '+'){
                    values.length = values.length - 1;
                    labels.length = labels.length - 1;
                }
            }

            for (i = 0; i < values.length; i++) {
                  values[i]= values[i].replace(/,/g, '');
            }

            BuildChart(labels.reverse(), values.reverse(), "Followers");
        }
    };
    xhttp.open("GET", "https://spreadsheets.google.com/feeds/list/1nLLfOhAD6PGcIPc5mttyBFi1maoveEYpsz4MiU7JNAA/od6/public/full?alt=json", false);
    xhttp.send();
</script>

我正在使用此图表显示某个人的关注者数据，我想要一个下拉列表，该人可以在其中选择他们喜欢查看的时间间隔或带有“昨天”、“过去 3 天”、“最后7天” 。提前感谢那些不厌其烦地帮助我的人。有没有可能做类似的事情？提前致谢

标签： javascriptchart.js

Answer 1

您可以通过更改chart.config.options.scales.xAxes[0].ticks.max和chart.config.options.scales.xAxes[0].ticks.min值来做到这一点。

上面的代码只注意一件事：我注意到标签是反向的。“今天”日期在右侧，左侧的值是未来几天。

我不太了解您如何尝试呈现数据，但无论如何这不会改变它的完成方式。days在上面的代码片段中，有一个带有数字输入的示例，它向当前日期添加了一定数量的。所以你只需要把它翻译成你的<select>.

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>

<div class="chart" style="position: relative; height:50vh; width:100%;margin: 0 auto;;">
  <canvas id="myChart" width="400" height="400"></canvas></div>
Days from now: <input id="days" value="0" type="number" />
<br/>
<select id="date-choose" disabled>
  <option value="1">Today</option>
  <option value="2">Yesterday</option>
  <option value="7">Last 7 Days</option>
</select>

<script>
  let chart; // 1
  let inp = document.getElementById("days");

  inp.oninput = function() { // 3
    const today = new Date().getTime() + +inp.value * 1000 * 60 * 60 * 24; // 4
    const newMax = new Date(today).toISOString().split("T")[0]
    console.log("newMax", newMax)

    chart.config.options.scales.xAxes[0].ticks.max = newMax

    chart.update();
  };

  function BuildChart(labels, values, chartTitle) {
    var data = {
      labels: labels,
      datasets: [{
        label: chartTitle, // Name the series
        data: values,
        backgroundColor: [
          'rgba(50, 99, 231, 0.2)',
          'rgba(50, 90, 231, 0.2)',
          'rgba(50, 90, 231, 0.2)',
          'rgba(50, 90, 231, 0.2)',
          'rgba(50, 90, 231, 0.2)',
          'rgba(50, 90, 231, 0.2)'
        ],
        borderColor: [
          'rgba(50, 90, 231, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(50, 90, 231, 1)',
          'rgba(50, 90, 231, 1)',
          'rgba(50, 90, 231, 1)',
          'rgba(50, 90, 231, 1)'
        ],
        borderWidth: 1
      }],
    };


    Chart.defaults.global.defaultFontColor = '#151515';
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        responsive: true, // Instruct chart js to respond nicely.
        maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: ''
            },
          }],
          yAxes: [{
            ticks: {
              callback: function(value, index, values) {
                if (Math.floor(value) === value) {
                  return value;
                }
              }
            }
          }]
        },
      }
    });
    return myChart;
  }

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var json = JSON.parse(this.response);
      //console.log(json);

      // Map json labels  back to values array
      var labels = json.feed.entry.map(function(e) {
        return e.gsx$date.$t;
      });

      // Map json values back to values array
      var values = json.feed.entry.map(function(e) {
        return e.gsx$followers.$t;
      });
      for (i = 0; i < values.length; i++) {
        if (values[i].charAt(0) == '-') {
          values.length = values.length - 1;
          labels.length = labels.length - 1;

        } else if (values[i].charAt(0) == '+') {
          values.length = values.length - 1;
          labels.length = labels.length - 1;
        }
      }

      for (i = 0; i < values.length; i++) {
        values[i] = values[i].replace(/,/g, '');
      }

      chart = BuildChart(labels.reverse(), values.reverse(), "Followers"); // 2
    }
  };
  xhttp.open("GET", "https://spreadsheets.google.com/feeds/list/1nLLfOhAD6PGcIPc5mttyBFi1maoveEYpsz4MiU7JNAA/od6/public/full?alt=json", false);
  xhttp.send();
</script>

上面的代码有几个重要的点（搜索注释以引用数字）。这些都是：

1. chart被创建以便它保存图表实例
2. BuildChart输出保存到chart
3. oninput需要创建一个新的侦听器来响应日期更改。如果你使用 a<select>你可以使用onchange事件来代替。
4. 这里的计算是减去我们想要显示的天数。