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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

Chart.js x 軸日期時(shí)間格式化失敗

Chart.js x 軸日期時(shí)間格式化失敗

絕地?zé)o雙 2022-10-08 18:00:38
我正在使用 Python 和 Flask 從服務(wù)和 Chart.js 獲取數(shù)據(jù)以繪制一段時(shí)間內(nèi)的值。我無(wú)法讓 xAxes 時(shí)間格式在 Chart.js 中工作。我是 JavaScript 新手,所以它可能很簡(jiǎn)單,比如缺少逗號(hào),但我不這么認(rèn)為。我的 python 正在將一個(gè)日期時(shí)間對(duì)象傳遞給 JavaScript。我想也許 chart.js 需要一個(gè)字符串,所以我創(chuàng)建了一個(gè)靜態(tài) python 函數(shù)來(lái)提供一些字符串日期,但它產(chǎn)生了相同的結(jié)果。帶有測(cè)試數(shù)據(jù)的 Python 函數(shù):from flask import Flask, Blueprint, render_template, requeststringDate_bp5 = Blueprint('stringDate_bp5', __name__,    template_folder='../templates',    static_folder='../stringDate/static/vendor/', static_url_path='/stringDate/static/vendor/')@stringDate_bp5.route("")def stringDate():    #reading1 = datetime.datetime(2019, 12, 19, 13, 36, 29, tzinfo=<DstTzInfo 'US/Pacific' PST-1 day, 16:00:00 STD>)    labels = ['2019-12-19T13:36:29-08:00', '2019-12-19T13:36:59-08:00', '2019-12-19T13:37:29-08:00', '2019-12-19T13:37:59-08:00', '2019-12-19T13:38:29-08:00']    values = [0.05, 0.07, 0.15, 0.08, 0.05]    legend = 'Test String Dates'    return render_template('chart2.html', values=values, labels=labels, legend=legend)輸出:帶有日、月、日期、年、時(shí)間、UTC 偏移量、時(shí)區(qū)的圖表輸出。 X 軸標(biāo)簽應(yīng)該只是時(shí)間,但無(wú)論我嘗試什么標(biāo)簽都保持上面顯示的默認(rèn)格式。
查看完整描述

1 回答

?
開滿天機(jī)

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊

您的圖表配置在更改Type: 'time'type: 'time'. 您可以運(yùn)行以下版本,它會(huì)替換您的 Python 模板變量。

這里有一些其他的事情要檢查

  • 更正type錯(cuò)字后,查找控制臺(tái)錯(cuò)誤。

  • 確保 moment.js 正確加載。

  • 檢查 moment.js 和 Chart.js 的版本(下面的示例分別使用 2.26.0 和 2.9.3)。

  • 提供實(shí)際的 HTML 源代碼(而不是模板),因?yàn)槿绻匀粨p壞,則意味著模板/傳遞值有問(wèn)題。

const config = {

  // The type of chart we want to create

  type: 'line', //types: bar, horizontalBar, pie, line, doughnut, radar, polarArea


  // The data for our dataset

  data: {

    labels: [new Date('2019-12-19T13:36:29-08:00'), new Date('2019-12-19T13:36:59-08:00'), new Date('2019-12-19T13:37:29-08:00'), new Date('2019-12-19T13:37:59-08:00'), new Date('2019-12-19T13:38:29-08:00')],

    datasets: [{

      label: 'Test String Dates',

      backgroundColor: 'rgba(255, 99, 132, 0)',

      borderColor: 'rgb(117, 4, 28)',

      borderWidth: 1,

      hoverBorderWidth: 3,

      hoverBorderColor: '#000',

      data: [0.05, 0.07, 0.15, 0.08, 0.05],

    }]

  },

  options: {

    title: {

      display: true,

      text: 'test string date time',

      fontSize: 25,

    },

    legend: {

      //display:false //to hide legend

      position: 'right',

      labels: {

        fontColor: '#000'

      }

    },

    tooltips: {

      //enabled:false,

    },

    scales: {

      yAxes: [{

        scaleLabel: {

          display: true,

          labelString: 'mg/m3',

          fontColor: '#000',

          fontWeight: 'bold',

          fontSize: 25

        }

      }],

      xAxes: [{

        type: 'time',

        time: {

          parser: 'HH:mm:ss a', //these formatting values do nothing, I've tried a few different ones

          unit: 'second', //I have tried minutes and hours too, same result

          displayFormats: {

            'millisecond': 'HH:mm:ss a', //I have tried without the 'a' too, same result

            'second': 'HH:mm:ss a',

            'minute': 'HH:mm:ss a',

            'hour': 'HH:mm:ss a',

            'day': 'HH:mm:ss a',

            'week': 'HH:mm:ss a',

            'month': 'HH:mm:ss a',

            'quarter': 'HH:mm:ss a',

            'year': 'HH:mm:ss a',

          }

        },

        ticks: {

          source: 'auto'

        },

        scaleLabel: {

          display: true,

          labelString: 'Recording Time',

          fontColor: '#000',

          fontWeight: 'bold',

          fontSize: 25

        }

      }]

    },

    responsive: true,

    maintainAspectRatio: false,

    elements: {

      point: {

        radius: 0

      },

      line: {

        tension: 0

      }

    },

  }


};


const ctx = document.getElementById('canvas').getContext('2d');

new Chart(ctx, config);

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

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


<body>

  <canvas id="canvas" width="600" height="400"></canvas>

</body>


查看完整回答
反對(duì) 回復(fù) 2022-10-08
  • 1 回答
  • 0 關(guān)注
  • 195 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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