亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

Chart.js x 軸日期時間格式化失敗

Chart.js x 軸日期時間格式化失敗

絕地無雙 2022-10-08 18:00:38
我正在使用 Python 和 Flask 從服務和 Chart.js 獲取數據以繪制一段時間內的值。我無法讓 xAxes 時間格式在 Chart.js 中工作。我是 JavaScript 新手,所以它可能很簡單,比如缺少逗號,但我不這么認為。我的 python 正在將一個日期時間對象傳遞給 JavaScript。我想也許 chart.js 需要一個字符串,所以我創建了一個靜態 python 函數來提供一些字符串日期,但它產生了相同的結果。帶有測試數據的 Python 函數: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)輸出:帶有日、月、日期、年、時間、UTC 偏移量、時區的圖表輸出。 X 軸標簽應該只是時間,但無論我嘗試什么標簽都保持上面顯示的默認格式。
查看完整描述

1 回答

?
開滿天機

TA貢獻1786條經驗 獲得超13個贊

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

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

  • 更正type錯字后,查找控制臺錯誤。

  • 確保 moment.js 正確加載。

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

  • 提供實際的 HTML 源代碼(而不是模板),因為如果它仍然損壞,則意味著模板/傳遞值有問題。

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>


查看完整回答
反對 回復 2022-10-08
  • 1 回答
  • 0 關注
  • 198 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號