了解如何使用高性能 JS 圖表創(chuàng)建可用于異常天氣和溫度科學(xué)研究的 JS 溫度異常圖表。

你好！

在本文中，我們將創(chuàng)建溫度異常圖表。

對于這個例子，我們將使用 LightningCharts JS 庫，特別是XY圖表。對于那些對技術(shù)細(xì)節(jié)感興趣的人，這里有一些XY 圖表的?特征：

1. 這種類型的圖表僅適用于兩個軸，X 和 Y。
2. 它允許我們將圖形中的數(shù)據(jù)點(diǎn)定位為坐標(biāo)。
3. XY 圖表是測量和讀取溫度異常的絕佳工具。
4. 異常指的是在一段較長的時間內(nèi)相對于參考值或平均值的變化。
5. 正值表示溫度變暖，而負(fù)值表示溫度變冷。

溫度異常圖的主要用途

• 氣候監(jiān)測：溫度異常圖有助于監(jiān)測溫度模式隨時間的變化，提供對氣候趨勢和整體氣候條件的洞察。?

• 氣候研究：溫度異常圖在研究氣候動態(tài)、識別氣候驅(qū)動因素以及研究自然和人為因素對溫度變化的影響方面具有科學(xué)用途。?
• 天氣預(yù)報(bào)：在氣象學(xué)中，溫度異常圖用于通過識別異常溫暖或寒冷的區(qū)域來預(yù)測天氣模式，有助于更準(zhǔn)確的短期天氣預(yù)測。?
• 環(huán)境分析：溫度異常會影響生態(tài)系統(tǒng)和環(huán)境系統(tǒng)，因此溫度異常圖表對于分析溫度變化對植被、野生動物和洋流的影響很有價值。

讓我們開始實(shí)施吧。

模板設(shè)置

1. 請下載以下模板 (.ZIP)，您可以在其中找到項(xiàng)目和學(xué)習(xí)本教程所需的所有文件。JavaScript 溫度異常圖表項(xiàng)目模板。

2. 下載項(xiàng)目后，在 Visual Studio 中將其打開，并可視化以下文件樹：

3. 現(xiàn)在，打開一個新終端，像往常一樣在NodeJS項(xiàng)目中運(yùn)行NPM install命令。有關(guān)安裝 NodeJS的更多信息，請參閱本文。

這就是設(shè)置模板的一切?，F(xiàn)在讓我們編寫代碼。

圖表.ts

在這個文件中，我們將擁有創(chuàng)建圖表、配置動畫和格式化數(shù)據(jù)所需的所有邏輯。

1.導(dǎo)入JSON數(shù)據(jù)：

import data from './data.json'

附言。如果您是 JSON 數(shù)據(jù)的新手，我向您推薦這本?JSON 數(shù)據(jù)建模指南。

2. 聲明將 lcjs?引用我們的常量@arction/lcjs library。

3. 從中提取所需的類lcjs。

const lcjs = require('@arction/lcjs')
const { lightningChart, AxisTickStrategies, UIElementBuilders, UIOrigins, ImageFill, emptyLine, ImageFitMode, emptyFill, Themes } = lcjs

4. 創(chuàng)建圖表對象：

const chart = lightningChart()
    .ChartXY({
        theme: Themes.darkLime,
    })
? ? .setTitle('')

• setTitle：將在儀表板中顯示為頂部標(biāo)題的文本。
• Theme：LightningChart JS 庫具有一組默認(rèn)實(shí)現(xiàn)，可由Themes.?組件的顏色主題必須在創(chuàng)建時指定，之后不能更改。

5.獲取Y軸：

const axisY1 = chart.getDefaultAxisY().setTitle('Atmospheric Carbon Dioxide (ppm)')

這getDefaultAxisY可以訪問 Y 軸，X 軸 (?getDefaultAxisX) 的情況相同。

一旦我們有權(quán)訪問它，我們就可以添加 UI 屬性，如標(biāo)題。AxisY1對應(yīng)圖表中的意義線：

6. 創(chuàng)建主 Y 軸線：

const axisY2 = chart
    .addAxisY({
        opposite: true,
    })
    .setTitle('Temperature Anomaly Index (°C)')
    // Hide tick grid-lines from second Y axis.
    .setTickStrategy(AxisTickStrategies.Numeric, (ticks) =>
        ticks
            .setMinorTickStyle((minor) => minor.setGridStrokeStyle(emptyLine))
            .setMajorTickStyle((major) => major.setGridStrokeStyle(emptyLine)),
? ? )

?文章來源地址http://www.zghlxwxcb.cn/news/detail-483030.html

刻度策略定義了軸刻度的定位和格式化邏輯以及創(chuàng)建的刻度的樣式。數(shù)字屬性對應(yīng)于要在 Y 軸上顯示的數(shù)字值。

對于 XY，刻度將為空行，因?yàn)槲覀儾恍枰趫D表中顯示每個刻度：

major.setGridStrokeStyle((solidLine) => solidLine.setThickness(500))),

7. X軸：

const axisX = chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime)

?如您所見，X 軸具有日期時間策略，因?yàn)槲覀冃枰慈掌陲@示數(shù)據(jù)：

?

?8. 使用 JSON 數(shù)據(jù)：

const { temperature, co2 } = data

//code stored in "data.json"
{
    "temperature":[-0.16,-0.08,-0.1,-0.17,-0.28,-0.33,-0.31,-0.36,-0.17,-0.1,-0.35,-0.22,-0.27,-0.31,-0.3,-0.23,-0.11,-0.11,-0.27,-0.18,-0.08,-0.16,-0.28,-0.37,-0.47,-0.26,-0.22,-0.39,-0.43,-0.49,-0.44,-0.44,-0.36,-0.35,-0.16,-0.15,-0.36,-0.46,-0.3,-0.28,-0.28,-0.19,-0.29,-0.27,-0.27,-0.22,-0.11,-0.22,-0.2,-0.36,-0.16,-0.1,-0.16,-0.29,-0.13,-0.2,-0.15,-0.03,0,-0.02,0.13,0.19,0.07,0.09,0.2,0.09,-0.07,-0.03,-0.11,-0.11,-0.17,-0.07,0.01,0.08,-0.13,-0.14,-0.19,0.05,0.06,0.03,-0.03,0.06,0.03,0.05,-0.2,-0.11,-0.06,-0.02,-0.08,0.05,0.03,-0.08,0.01,0.16,-0.07,-0.01,-0.1,0.18,0.07,0.16,0.26,0.32,0.14,0.31,0.16,0.12,0.18,0.32,0.39,0.27,0.45,0.4,0.22,0.23,0.32,0.45,0.33,0.46,0.61,0.38,0.39,0.54,0.63,0.62,0.53,0.68,0.64,0.66,0.54,0.66,0.72,0.61,0.65,0.68,0.74,0.9,1.01,0.92,0.85,0.98,1.02],
    "co2":[285.2,285.1,285,285,284.9,285.1,285.4,285.6,285.9,286.1,286.4,286.6,286.7,286.8,286.9,287.1,287.2,287.3,287.4,287.5,287.7,287.9,288,288.2,288.4,288.6,288.7,288.9,289.5,290.1,290.8,291.4,292,292.5,292.9,293.3,293.8,294,294.1,294.2,294.4,294.6,294.8,294.7,294.8,294.8,294.9,294.9,294.9,295.3,295.7,296.2,296.6,297,297.5,298,298.4,298.8,299.3,299.7,300.1,300.6,301,301.3,301.4,301.6,302,302.4,302.8,303,303.4,303.7,304.1,304.5,304.9,305.3,305.8,306.2,306.6,307.2,307.5,308,308.3,308.9,309.3,309.7,310.1,310.6,311,311.2,311.3,311,310.7,310.5,310.2,310.3,310.3,310.4,310.5,310.9,311.3,311.8,312.2,312.6,313.2,313.7,314.3,314.8,315.34,316.18,317.07,317.73,318.43,319.08,319.65,320.23,321.59,322.31,323.04,324.23,325.54,326.42,327.45,329.43,330.21,331.36,331.92,333.73,335.42,337.1,338.99,340.36,341.57,342.53,344.24,345.72,347.15,348.93,351.47,353.15,354.29]
  }

?9. 為大氣二氧化碳線添加值：

const carbonDioxideSeries = chart
    .addLineSeries({
        yAxis: axisY1,
    })
    .setName('Atmospheric Carbon Dioxide (ppm)')
    // Data set contains PPM measurement values only. First measurement is from year 1880, and each consecutive measurement is 1 year after previous.
    .add(
        co2.map((ppm, i) => ({
            y: ppm,
            x: new Date(1880 + i, 0, 1, 0, 0, 0, 0).getTime(),
        })),
? ? )

如您所見，Y1 軸上添加了一個線系列。名稱設(shè)置為系列，數(shù)據(jù)映射自 JSON 數(shù)據(jù)中的 CO2 數(shù)組對象。我們沒有日期值，因此只需從 1880 年開始連續(xù)添加 1 年，以創(chuàng)建一條不間斷的線。

10.添加圖例框：

// Add legend.
const legend = chart.addLegendBox(undefined, { x: axisX, y: axisY1 }).add(chart)
.setOrigin(UIOrigins.LeftTop)
.setMargin(4)
const positionLegendOnAxes = () => legend.setPosition({ x: axisX.getInterval().start, y: axisY1.getInterval().end })
positionLegendOnAxes()

?

添加legendbox到意義線（Y 軸）和唯一的 X 軸。

• ?setOrigin:設(shè)置此 UiElement 的位置原點(diǎn)。?
• setMargin：以像素為單位設(shè)置對象周圍的邊距。?
• setPosition:設(shè)置此 UiElement 相對于其原點(diǎn)的位置。?
• getInterval：獲取當(dāng)前應(yīng)用的坐標(biāo)軸刻度間隔。

NPM 開始

要初始化圖表，請打開一個新終端并運(yùn)行命令npm start。您將看到本地主機(jī)路徑。單擊它并與瀏覽器上的圖表進(jìn)行交互。

在這里，您可以看到最終圖表：

結(jié)論

在本文中，我們以非常簡單的方式創(chuàng)建了 XY 圖表的實(shí)現(xiàn)。為了生成 XY 圖表，我們只需要使用該charXY()方法。

在此示例中，我們使用了LC JS?庫中的默認(rèn)值，但在您的情況下，您只需要一個具有所需值的 JSON 類型的對象。

從技術(shù)上講，只要您使用兩個陣列，該過程就應(yīng)該有效。幾乎所有的代碼開發(fā)都集中在圖表定制上，加載數(shù)據(jù)的過程也很容易理解。

另一個要點(diǎn)是主題目錄的使用，它允許我們生成外觀相當(dāng)復(fù)雜的圖表，但無需求助于外部 CSS 類。

毫無疑問，LC JS 有助于以更少的執(zhí)行時間執(zhí)行最佳工作。

?

到了這里，關(guān)于JavaScript 溫度異常圖表的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！