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

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

如何在 x 軸上制作帶有動態(tài)月份的 Chart.js

如何在 x 軸上制作帶有動態(tài)月份的 Chart.js

慕桂英3389331 2022-07-21 10:03:28
我正在嘗試制作一個帶有動態(tài) x 軸的 Chart.js,它將始終使用接下來的 7 個月作為 x 軸的刻度。但我有兩個問題:線條沒有顯示在我的圖表上x 軸只顯示第一個月和最后一個月,中間沒有月份。這是我在油漆中制作的一個示例,以展示我想要實現(xiàn)的目標(biāo):這是我到目前為止的代碼:/* Build the charts */var ctx = document.getElementById('ROIchart').getContext('2d');var chart = new Chart(ctx, {  // The type of chart we want to create  type: 'line',  // The data for our dataset  data: {    datasets: [{      label: 'Paid Search and Leads',      backgroundColor: 'red',      borderColor: 'red',      data: [10, 10, 10, 10, 10, 10, 10],    }, {      label: 'SEO and Content',      backgroundColor: 'green',      borderColor: 'green',      data: [0, 2, 8, 21, 57, 77, 100],      fill: true,    }]  },  // Configuration options go here  options: {    responsive: true,    scales: {      xAxes: [{        type: 'time',        time: {          unit: 'month'        }      }]    }  }});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script><canvas id="ROIchart"></canvas>
查看完整描述

1 回答

?
臨摹微笑

TA貢獻(xiàn)1982條經(jīng)驗 獲得超2個贊

使用 moment.js 庫,您可以查看數(shù)組的長度,并從開始的月份生成月份,然后將它們作為標(biāo)簽


/* Build the charts */

var ctx = document.getElementById('ROIchart').getContext('2d');

var array1 = [10, 10, 10, 10, 10, 10, 10];

var months = []

for (let i = 0; i < array1.length; i++) {

  months.push(moment().year(2020).month(i+1).date(0).startOf('month'))

}

var chart = new Chart(ctx, {

  type: 'line',

  data: {

    labels: months,

    datasets: [{

      label: 'Paid Search and Leads',

      backgroundColor: 'red',

      borderColor: 'red',

      data: array1,

    }, {

      label: 'SEO and Content',

      backgroundColor: 'green',

      borderColor: 'green',

      data: [0, 2, 8, 21, 57, 77, 100],

      fill: true,

    }]

  },

  options: {

    responsive: true,

    scales: {

      xAxes: [{

        type: 'time',

        time: {

          unit: 'month'

        }

      }]

    }

  }

});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>

<canvas id="ROIchart"></canvas>


查看完整回答
反對 回復(fù) 2022-07-21
  • 1 回答
  • 0 關(guān)注
  • 114 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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