主页 / 问题 / 1227218
Accepted
gil9red
Asked:2022-01-05 04:12:04 +0000 UTC2022-01-05 04:12:04 +0000 UTC

沿 X 轴的标签的美丽位置

  • 772

最好不要经常有值，而是说，在一段时间内。

X轴问题的本质：

在此处输入图像描述

图表创建片段：

      var ctx = document.getElementById("lineChart").getContext("2d");
      var lineChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: labels,
          datasets: [{
            label: 'Value',
            lineTension: 0,
            borderColor: "#3e95cd",
            data: data,
          }],
        },
        options: {
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'day',
                tooltipFormat: 'DD/MM/YYYY HH:mm:ss',
                displayFormats: {
                  day: 'DD/MM'
                }
              },
              distribution: 'linear'
            }]
          },
          tooltips: {
            callbacks: {
              afterLabel: function(tooltipItem, data) {
                return window.value_by_human[tooltipItem.yLabel];
              }
            }
          }
        }
      });
    }

完整示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.css">
</head>

<body>

  <div class="container-fluid">
    <div class="row m-2">
      <div class="col table-responsive">
        <table id="people_reacheds" class="table table-hover" style="display:none">
          <tbody>
            <tr>
              <th scope="col" class="text-white bg-dark">DATE:</th>

              <td class="date" title="31/12/2020 04:40:21" date_iso="2020-12-31T04:40:21.935162">31/12/2020</td>

              <td class="date" title="30/12/2020 08:46:43" date_iso="2020-12-30T08:46:43.711484">30/12/2020</td>

              <td class="date" title="24/12/2020 20:09:33" date_iso="2020-12-24T20:09:33.091634">24/12/2020</td>

              <td class="date" title="17/12/2020 21:39:33" date_iso="2020-12-17T21:39:33.601907">17/12/2020</td>

              <td class="date" title="14/12/2020 23:28:48" date_iso="2020-12-14T23:28:48.422827">14/12/2020</td>

              <td class="date" title="07/12/2020 23:28:46" date_iso="2020-12-07T23:28:46.715471">07/12/2020</td>

              <td class="date" title="30/11/2020 23:28:44" date_iso="2020-11-30T23:28:44.779245">30/11/2020</td>

              <td class="date" title="23/11/2020 23:28:42" date_iso="2020-11-23T23:28:42.873055">23/11/2020</td>

              <td class="date" title="16/11/2020 23:28:39" date_iso="2020-11-16T23:28:39.656186">16/11/2020</td>

              <td class="date" title="15/11/2020 07:04:26" date_iso="2020-11-15T07:04:26.035520">15/11/2020</td>

              <td class="date" title="08/11/2020 07:04:24" date_iso="2020-11-08T07:04:24.615554">08/11/2020</td>

              <td class="date" title="01/11/2020 07:04:22" date_iso="2020-11-01T07:04:22.667045">01/11/2020</td>

              <td class="date" title="25/10/2020 07:04:20" date_iso="2020-10-25T07:04:20.926777">25/10/2020</td>

              <td class="date" title="19/10/2020 18:41:20" date_iso="2020-10-19T18:41:20.984605">19/10/2020</td>

              <td class="date" title="12/10/2020 18:41:19" date_iso="2020-10-12T18:41:19.241482">12/10/2020</td>

              <td class="date" title="10/10/2020 03:37:29" date_iso="2020-10-10T03:37:29.812292">10/10/2020</td>

              <td class="date" title="03/10/2020 03:37:28" date_iso="2020-10-03T03:37:28.622003">03/10/2020</td>

              <td class="date" title="01/10/2020 20:36:52" date_iso="2020-10-01T20:36:52.072139">01/10/2020</td>

              <td class="date" title="29/09/2020 23:20:36" date_iso="2020-09-29T23:20:36.477150">29/09/2020</td>

              <td class="date" title="22/09/2020 23:20:35" date_iso="2020-09-22T23:20:35.457498">22/09/2020</td>

              <td class="date" title="15/09/2020 23:20:33" date_iso="2020-09-15T23:20:33.323655">15/09/2020</td>

              <td class="date" title="08/09/2020 23:20:30" date_iso="2020-09-08T23:20:30.532326">08/09/2020</td>

              <td class="date" title="03/09/2020 09:42:13" date_iso="2020-09-03T09:42:13.429384">03/09/2020</td>

              <td class="date" title="27/08/2020 09:42:10" date_iso="2020-08-27T09:42:10.154810">27/08/2020</td>

              <td class="date" title="20/08/2020 09:42:08" date_iso="2020-08-20T09:42:08.121289">20/08/2020</td>

              <td class="date" title="13/08/2020 09:42:06" date_iso="2020-08-13T09:42:06.618824">13/08/2020</td>

              <td class="date" title="11/08/2020 11:26:23" date_iso="2020-08-11T11:26:23.266438">11/08/2020</td>

              <td class="date" title="05/08/2020 02:23:43" date_iso="2020-08-05T02:23:43.656755">05/08/2020</td>

              <td class="date" title="29/07/2020 02:23:41" date_iso="2020-07-29T02:23:41.906773">29/07/2020</td>

              <td class="date" title="28/07/2020 11:13:58" date_iso="2020-07-28T11:13:58.412371">28/07/2020</td>

              <td class="date" title="23/07/2020 11:48:07" date_iso="2020-07-23T11:48:07.281745">23/07/2020</td>

              <td class="date" title="16/07/2020 11:48:05" date_iso="2020-07-16T11:48:05.935886">16/07/2020</td>

              <td class="date" title="09/07/2020 11:48:02" date_iso="2020-07-09T11:48:02.151930">09/07/2020</td>

              <td class="date" title="02/07/2020 11:48:00" date_iso="2020-07-02T11:48:00.163430">02/07/2020</td>

              <td class="date" title="30/06/2020 02:24:04" date_iso="2020-06-30T02:24:04.733718">30/06/2020</td>

              <td class="date" title="28/06/2020 03:58:20" date_iso="2020-06-28T03:58:20.680849">28/06/2020</td>

              <td class="date" title="20/06/2020 22:15:35" date_iso="2020-06-20T22:15:35.938966">20/06/2020</td>

              <td class="date" title="20/06/2020 03:17:46" date_iso="2020-06-20T03:17:46.741782">20/06/2020</td>

              <td class="date" title="19/06/2020 09:34:34" date_iso="2020-06-19T09:34:34.784125">19/06/2020</td>

              <td class="date" title="12/06/2020 09:34:33" date_iso="2020-06-12T09:34:33.270590">12/06/2020</td>

              <td class="date" title="09/06/2020 09:30:47" date_iso="2020-06-09T09:30:47.568126">09/06/2020</td>

              <td class="date" title="02/06/2020 09:30:46" date_iso="2020-06-02T09:30:46.175859">02/06/2020</td>

              <td class="date" title="28/05/2020 23:16:36" date_iso="2020-05-28T23:16:36.354410">28/05/2020</td>

              <td class="date" title="21/05/2020 23:16:34" date_iso="2020-05-21T23:16:34.626614">21/05/2020</td>

              <td class="date" title="15/05/2020 02:23:09" date_iso="2020-05-15T02:23:09.083082">15/05/2020</td>

              <td class="date" title="13/05/2020 11:52:16" date_iso="2020-05-13T11:52:16.130476">13/05/2020</td>

              <td class="date" title="10/05/2020 12:31:42" date_iso="2020-05-10T12:31:42.618969">10/05/2020</td>

              <td class="date" title="06/05/2020 03:10:43" date_iso="2020-05-06T03:10:43.009306">06/05/2020</td>

              <td class="date" title="29/04/2020 03:10:41" date_iso="2020-04-29T03:10:41.236857">29/04/2020</td>

              <td class="date" title="22/04/2020 03:10:39" date_iso="2020-04-22T03:10:39.274119">22/04/2020</td>

              <td class="date" title="17/04/2020 18:12:27" date_iso="2020-04-17T18:12:27.117513">17/04/2020</td>

              <td class="date" title="16/04/2020 00:27:37" date_iso="2020-04-16T00:27:37.021293">16/04/2020</td>

              <td class="date" title="15/04/2020 21:37:02" date_iso="2020-04-15T21:37:02.737052">15/04/2020</td>

              <td class="date" title="08/04/2020 21:37:00" date_iso="2020-04-08T21:37:00.921747">08/04/2020</td>

              <td class="date" title="08/04/2020 02:24:51" date_iso="2020-04-08T02:24:51.791654">08/04/2020</td>

              <td class="date" title="31/03/2020 23:13:35" date_iso="2020-03-31T23:13:35.115623">31/03/2020</td>

              <td class="date" title="24/03/2020 23:13:33" date_iso="2020-03-24T23:13:33.876696">24/03/2020</td>

              <td class="date" title="23/03/2020 01:13:03" date_iso="2020-03-23T01:13:03.575580">23/03/2020</td>

              <td class="date" title="16/03/2020 01:13:01" date_iso="2020-03-16T01:13:01.631929">16/03/2020</td>

              <td class="date" title="09/03/2020 01:13:00" date_iso="2020-03-09T01:13:00.378092">09/03/2020</td>

              <td class="date" title="02/03/2020 01:12:58" date_iso="2020-03-02T01:12:58.064142">02/03/2020</td>

              <td class="date" title="24/02/2020 01:12:56" date_iso="2020-02-24T01:12:56.776900">24/02/2020</td>

              <td class="date" title="18/02/2020 15:35:55" date_iso="2020-02-18T15:35:55.790940">18/02/2020</td>

              <td class="date" title="11/02/2020 15:35:53" date_iso="2020-02-11T15:35:53.823624">11/02/2020</td>

              <td class="date" title="04/02/2020 15:35:52" date_iso="2020-02-04T15:35:52.352451">04/02/2020</td>

              <td class="date" title="03/02/2020 23:32:19" date_iso="2020-02-03T23:32:19.980404">03/02/2020</td>

              <td class="date" title="29/01/2020 21:19:55" date_iso="2020-01-29T21:19:55.745535">29/01/2020</td>

              <td class="date" title="27/01/2020 03:08:28" date_iso="2020-01-27T03:08:28.967907">27/01/2020</td>

              <td class="date" title="22/01/2020 22:41:19" date_iso="2020-01-22T22:41:19.906786">22/01/2020</td>

              <td class="date" title="17/01/2020 00:08:45" date_iso="2020-01-17T00:08:45.138537">17/01/2020</td>

              <td class="date" title="13/01/2020 21:50:43" date_iso="2020-01-13T21:50:43.761530">13/01/2020</td>

              <td class="date" title="07/01/2020 03:28:01" date_iso="2020-01-07T03:28:01.838701">07/01/2020</td>

              <td class="date" title="06/01/2020 23:06:19" date_iso="2020-01-06T23:06:19.051112">06/01/2020</td>

              <td class="date" title="03/01/2020 13:57:24" date_iso="2020-01-03T13:57:24.987168">03/01/2020</td>

              <td class="date" title="30/12/2019 04:06:02" date_iso="2019-12-30T04:06:02.288590">30/12/2019</td>

              <td class="date" title="27/12/2019 17:28:35" date_iso="2019-12-27T17:28:35.826498">27/12/2019</td>

              <td class="date" title="23/12/2019 23:11:08" date_iso="2019-12-23T23:11:08.050501">23/12/2019</td>

              <td class="date" title="16/12/2019 23:11:06" date_iso="2019-12-16T23:11:06.384122">16/12/2019</td>

              <td class="date" title="11/12/2019 05:33:06" date_iso="2019-12-11T05:33:06.753995">11/12/2019</td>

              <td class="date" title="05/12/2019 10:02:38" date_iso="2019-12-05T10:02:38.337612">05/12/2019</td>

              <td class="date" title="28/11/2019 10:02:36" date_iso="2019-11-28T10:02:36.291164">28/11/2019</td>

              <td class="date" title="21/11/2019 10:02:33" date_iso="2019-11-21T10:02:33.813003">21/11/2019</td>

              <td class="date" title="14/11/2019 06:14:40" date_iso="2019-11-14T06:14:40.750659">14/11/2019</td>

              <td class="date" title="07/11/2019 21:21:10" date_iso="2019-11-07T21:21:10.453900">07/11/2019</td>

            </tr>
            <tr>
              <th scope="col" class="text-white bg-dark">VALUE:</th>

              <td class="value" title="1000000">~1.0m</td>

              <td class="value" title="999000">~999k</td>

              <td class="value" title="991000">~991k</td>

              <td class="value" title="978000">~978k</td>

              <td class="value" title="972000">~972k</td>

              <td class="value" title="959000">~959k</td>

              <td class="value" title="946000">~946k</td>

              <td class="value" title="933000">~933k</td>

              <td class="value" title="920000">~920k</td>

              <td class="value" title="916000">~916k</td>

              <td class="value" title="903000">~903k</td>

              <td class="value" title="891000">~891k</td>

              <td class="value" title="879000">~879k</td>

              <td class="value" title="870000">~870k</td>

              <td class="value" title="859000">~859k</td>

              <td class="value" title="855000">~855k</td>

              <td class="value" title="844000">~844k</td>

              <td class="value" title="842000">~842k</td>

              <td class="value" title="839000">~839k</td>

              <td class="value" title="828000">~828k</td>

              <td class="value" title="818000">~818k</td>

              <td class="value" title="809000">~809k</td>

              <td class="value" title="802000">~802k</td>

              <td class="value" title="795000">~795k</td>

              <td class="value" title="788000">~788k</td>

              <td class="value" title="781000">~781k</td>

              <td class="value" title="779000">~779k</td>

              <td class="value" title="772000">~772k</td>

              <td class="value" title="765000">~765k</td>

              <td class="value" title="764000">~764k</td>

              <td class="value" title="759000">~759k</td>

              <td class="value" title="751000">~751k</td>

              <td class="value" title="743000">~743k</td>

              <td class="value" title="734000">~734k</td>

              <td class="value" title="732000">~732k</td>

              <td class="value" title="729000">~729k</td>

              <td class="value" title="721000">~721k</td>

              <td class="value" title="720000">~720k</td>

              <td class="value" title="719000">~719k</td>

              <td class="value" title="710000">~710k</td>

              <td class="value" title="706000">~706k</td>

              <td class="value" title="696000">~696k</td>

              <td class="value" title="690000">~690k</td>

              <td class="value" title="678000">~678k</td>

              <td class="value" title="666000">~666k</td>

              <td class="value" title="663000">~663k</td>

              <td class="value" title="659000">~659k</td>

              <td class="value" title="652000">~652k</td>

              <td class="value" title="640000">~640k</td>

              <td class="value" title="627000">~627k</td>

              <td class="value" title="619000">~619k</td>

              <td class="value" title="616000">~616k</td>

              <td class="value" title="615000">~615k</td>

              <td class="value" title="602000">~602k</td>

              <td class="value" title="601000">~601k</td>

              <td class="value" title="589000">~589k</td>

              <td class="value" title="578000">~578k</td>

              <td class="value" title="575000">~575k</td>

              <td class="value" title="566000">~566k</td>

              <td class="value" title="556000">~556k</td>

              <td class="value" title="547000">~547k</td>

              <td class="value" title="538000">~538k</td>

              <td class="value" title="531000">~531k</td>

              <td class="value" title="521000">~521k</td>

              <td class="value" title="512000">~512k</td>

              <td class="value" title="511000">~511k</td>

              <td class="value" title="505000">~505k</td>

              <td class="value" title="501000">~501k</td>

              <td class="value" title="496000">~496k</td>

              <td class="value" title="489000">~489k</td>

              <td class="value" title="485000">~485k</td>

              <td class="value" title="479000">~479k</td>

              <td class="value" title="478000">~478k</td>

              <td class="value" title="476000">~476k</td>

              <td class="value" title="474000">~474k</td>

              <td class="value" title="473000">~473k</td>

              <td class="value" title="467000">~467k</td>

              <td class="value" title="459000">~459k</td>

              <td class="value" title="452000">~452k</td>

              <td class="value" title="444000">~444k</td>

              <td class="value" title="435000">~435k</td>

              <td class="value" title="427000">~427k</td>

              <td class="value" title="420000">~420k</td>

              <td class="value" title="414000">~414k</td>

            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <div class="container">
          <canvas id="lineChart"></canvas>
        </div>
      </div>
    </div>
  </div>

  <script>
    window.value_by_human = new Map();

    function fill_chart(row) {
      window.value_by_human.clear();

      let labels = [];
      let data = [];

      let data_items = $('#people_reacheds > tbody > tr:nth-of-type(1) > td');
      let value_items = $('#people_reacheds > tbody > tr:nth-of-type(2) > td');

      for (let i = 0; i < data_items.length; i++) {
        let td_data = $(data_items[i]);
        let td_value = $(value_items[i]);

        let date_iso = td_data.attr('date_iso');
        let value = parseInt(td_value.attr('title'));

        window.value_by_human[value] = td_value.text();

        labels.push(date_iso);
        data.push({
          x: date_iso,
          y: value
        });
      }

      var ctx = document.getElementById("lineChart").getContext("2d");
      var lineChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: labels,
          datasets: [{
            label: 'Value',
            lineTension: 0,
            borderColor: "#3e95cd",
            data: data,
          }],
        },
        options: {
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'day',
                tooltipFormat: 'DD/MM/YYYY HH:mm:ss',
                displayFormats: {
                  day: 'DD/MM'
                }
              },
              distribution: 'linear'
            }]
          },
          tooltips: {
            callbacks: {
              afterLabel: function(tooltipItem, data) {
                return window.value_by_human[tooltipItem.yLabel];
              }
            }
          }
        }
      });
    }

    $(document).ready(function() {
      fill_chart();
    });
  </script>

</body>

</html>

javascript

1 个回答

  1. Best Answer

    需要将设置Chart中options/scales/xAxes/time/unit的值更改为month

    例子：

          var ctx = document.getElementById("lineChart").getContext("2d");
      var lineChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: labels,
          datasets: [{
            label: 'Value',
            lineTension: 0,
            borderColor: "#3e95cd",
            data: data,
          }],
        },
        options: {
          scales: {
            xAxes: [{
              type: 'time',
              time: {
                unit: 'month',
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^

    现在看起来像这样：

    在此处输入图像描述

    • 2

相关问题