第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何在圖表上有兩個以上數(shù)字的 Chartjs 中的 xAxe 上僅顯示 2 個數(shù)字？

如何在圖表上有兩個以上數(shù)字的 Chartjs 中的 xAxe 上僅顯示 2 個數(shù)字？

拉丁的傳說 2021-12-02 20:03:09
我只想有一次 2018 年和一次 2019 年，當 2019 年的數(shù)據(jù)開始時，它實際上是這樣的：當我嘗試只放置兩個標簽時，它只顯示整個圖表中的兩個數(shù)字。我想要實現(xiàn)的是，盡管圖表上有很多數(shù)據(jù)，但我的 x 軸（兩年）上的標簽僅顯示兩次，因此并非所有日子都像現(xiàn)在這樣。我在整個 Web 開發(fā)方面并沒有太多經(jīng)驗，因此感謝您提供任何幫助。提前致謝。var config = {  type: 'line',  data: {    labels: ['26.10.2018', '02.11.2018', '09.11.2018', '16.11.2018', '23.11.2018', '30.11.2018', '07.12.2018', '14.12.2018', '21.12.2018', '28.12.2018', '31.12.2018', '01.01.2018', '04.01.2019', '11.01.2019', '18.01.2019', '25.01.2019', '01.02.2019', '08.02.2019', '15.02.2019', '22.02.2019', '01.03.2019'],    datasets: [{      label: 'Modell',      data: [{          x: '26.10.2018',          y: -4.43        }, {          x: '02.11.2018',          y: -3.47        }, {          x: '09.11.2018',          y: -3.34        }, {          x: '16.11.2018',          y: -3.62        }, {          x: '23.11.2018',          y: -4.20        }, {          x: '30.11.2018',          y: -3.70        }, {          x: '07.12.2018',          y: -4.04        }, {          x: '14.12.2018',          y: -3.75        }, {          x: '21.12.2018',          y: -4.46        }, {          x: '28.12.2018',          y: -4.50        }, {          x: '31.12.2018',          y: -4.50        },        {          x: '01.01.2018',          y: -4.50        }, {          x: '04.01.2018',          y: -4.05        }, {          x: '11.01.2018',          y: -3.76        }, {          x: '18.01.2018',          y: -3.64        }, {          x: '25.01.2018',          y: -3.38        }, {          x: '01.02.2019',          y: -3.09        }, {          x: '08.02.2019',          y: -3.24        }, {          x: '15.02.2019',          y: -2.88        }      ],      fill: false,    }]  },  options: {    responsive: true,    title: {      display: true,      text: 'TAM Eurosectors Defensiv'    },    scales: {      xAxes: [{        display: true,        scaleLabel: {          display: true,          labelString: '2018 - 2019'        }      }]    }  }};
查看完整描述

2 回答

?
慕哥6287543

TA貢獻1831條經(jīng)驗 獲得超10個贊

您應該使用時間 xAxis獲得更多關于時間的選項。


  scales: {

    xAxes: [{

      type: 'time',

      time: { 

        unit: 'year'

      }

    }]

  },

您必須導入moment.js以獲得更多計算和顯示數(shù)據(jù)的選項。我使用了它，因此您可以以德國日期格式顯示標簽（不知道您是否需要，只是看到您來自德國并且您使用德國日期格式進行輸入）。


這是格式化工具提示的代碼：


  tooltips: {

    callbacks: {

      title: function(tooltipItem, data){

        return moment(tooltipItem[0].label).format('DD.MM.YYYY')

      }

    }

  }

這是 JSBin 中的所有代碼


PS：您的日期有誤，例如“2018-01-01”而不是“2019-01-01”，并且將它們放入數(shù)據(jù)時不需要額外的標簽。


查看完整回答
反對 回復 2021-12-02
?
倚天杖

TA貢獻1828條經(jīng)驗 獲得超3個贊

當您繪制時間序列時，您應該使用時間軸類型。要使用它，您首先需要更正數(shù)據(jù)集：


必須以明確的格式（即ISO-8601）提供日期：YYYY-MM-DD.

您的日期必須按時間順序排列。您的問題顯示2018-01 在 2018-10圖像和代碼之后，這顯然是一個錯誤。

完成此操作后，您可以根據(jù)需要簡單地將時間軸配置為僅顯示年份：


options: {

  scales: {

    xAxes: [{

      type: "time",

      time: {

        unit: "year"

      }

    }

  }

}

下面是一個使用您的數(shù)據(jù)集的完整示例（如上文詳述的更正）。請注意，您不需要提供，labels因為時間軸會自動計算刻度標簽。


var config = {

  type: 'line',

  data: {

    datasets: [{

      label: 'Modell',

      data: [{

          x: '2018-01-01',

          y: -4.50

        }, {

          x: '2018-01-04',

          y: -4.05


        }, {

          x: '2018-01-11',

          y: -3.76

        },

        {

          x: '2018-01-18',

          y: -3.64

        }, {

          x: '2018-01-25',

          y: -3.38


        }, {

          x: '2018-10-26',

          y: -4.43

        }, {

          x: '2018-11-02',

          y: -3.47


        }, {

          x: '2018-11-09',

          y: -3.34

        },

        {

          x: '2018-11-16',

          y: -3.62

        }, {

          x: '2018-11-23',

          y: -4.20


        }, {

          x: '2018-11-30',

          y: -3.70

        },

        {

          x: '2018-12-07',

          y: -4.04

        }, {

          x: '2018-12-14',

          y: -3.75


        }, {

          x: '2018-12-21',

          y: -4.46

        }, {

          x: '2018-12-28',

          y: -4.50


        }, {

          x: '2018-12-31',

          y: -4.50

        }, {

          x: '2019-02-01',

          y: -3.09

        },

        {

          x: '2019-02-08',

          y: -3.24

        }, {

          x: '2019-02-15',

          y: -2.88

        }

      ],

      fill: false

    }]

  },

  options: {

    responsive: true,

    title: {

      display: true,

      text: 'TAM Eurosectors Defensiv'

    },

    scales: {

      xAxes: [{

        type: "time",

        time: {

          unit: "year"

        },

        scaleLabel: {

          display: true,

          labelString: '2018 - 2019'

        }

      }]

    }

  }

};


new Chart(document.getElementById("chart"), config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>

<canvas id="chart"></canvas>


查看完整回答
反對 回復 2021-12-02
  • 2 回答
  • 0 關注
  • 307 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號