岛国七区在线播放,中文字幕在线欧美,亚洲欧美日韩tv

跨平臺圖表控件Anychart教程：如何使用JavaScript創建堆積面積圖（下）

翻譯|使用教程|編輯：莫成敏|2020-06-24 11:52:34.130|閱讀 255 次

概述：堆疊的面積圖是經典面積圖的一種變體，是一種非常流行的數據可視化形式。它們非常適合以圖形方式表示多個變量及其總數如何隨時間變化。在本教程中，我將向您展示如何輕松地創建交互式JavaScript堆疊面積圖，該圖在任何HTML5項目、網站或應用中都具有吸引力。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。

點擊下載AnyChart正式版

本教程分為上下兩個部分內容，本文是下篇，內容緊接上文！

自定義JavaScript堆積面積圖

不同的人很可能會為圖表選擇不同的功能和美觀，更不用說您作為Web開發人員或數據可視化設計師可能會獲得的不同任務。幸運的是，可以輕松修改由AnyChart支持的JS圖表，以適應您的需求和偏好。我將向您展示如何立即執行一些快速自定義：

添加圖例和動畫。
將值更改為百分比。
配置工具提示，標記和標簽。
更改顏色。

添加圖例和動畫

每個顯示多個值的圖表都應具有圖例，以便于閱讀。

添加以下代碼以打開基于JS的堆積面積圖的圖例。

我還想通過添加動畫來給這張圖表一點哇的效果。您可以通過在圖表的JavaScript代碼中添加一小段代碼來快速實現此目的：

查看結果，您可以在AnyChart Playground上找到帶有圖例和動畫的JS堆疊區域圖：

將值更改為百分比

現在，讓我們將堆疊模式從值切換為百分比。這樣，您可以可視化構圖如何變化而與總數無關。

這很簡單。要使JavaScript（HTML5）百分比堆疊的面積圖可視化相同的數據，只需將“value”替換為“percent”：

// change the stacking mode to percent
chart.yScale().stackMode('percent');

該JS百分比堆積面積圖可在AnyChart Playground上獲得。

配置工具提示，標記和標簽

讓我們使圖表在工具提示和圖例中顯示系列標題。有很多方法可以做到這一點。但是我也想修改點標記。因此，讓我們創建一個輔助函數，您可以在其中編寫自定義所有這些元素所需的代碼：

// helper function to setup tooltip labels for all series and style markers
var setupSeriesLabels = function (series, name) {
  series.name(name)
};

在我要設置系列并添加相應標題的地方使用此功能：

// create a series with the mapped active data
var actSeries = chart.splineArea(activeData);
setupSeriesLabels(actSeries, 'Active');

// create a series with the mapped recovered data
var recSeries = chart.splineArea(recoveredData);
setupSeriesLabels(recSeries, 'Recovered');

// create a series with the mapped deaths data
var deathsSeries = chart.splineArea(deathsData);
setupSeriesLabels(deathsSeries, 'Deaths');

現在，再次使用助手功能來設置標記樣式。我要做的是使它們變成圓形，給它們指定特定的大小，并指定它們的筆觸粗細和顏色。最后，我還將指定它們的zIndex()，以便它們出現在最前面。

這是代碼：

// helper function to setup series and give them appropriate names in order to distinguish and label them properly
var setupSeries = function (series, name) {
  series.name(name)
  // setting the markers
  series.hovered().stroke('3 #fff 1');
  series.hovered().markers()
    .enabled(true)
    .type('circle')
    .size(4)
    .stroke('1.5 #fff');
  series.markers().zIndex(100);
};

經過這些更改后，圖表的輸出如下：

歡迎您在AnyChart Playground打開此自定義的JS百分比堆積面積圖。

改變顏色

最后，我想將圖表的顏色修改為對我來說更有意義的顏色。我要用紅色陰影表示死亡，綠色表示恢復，藍色表示活躍。隨意提出自己的想法！

這是代碼：

// create a series with the mapped active series
var actSeries = chart.splineArea(activeData)
.fill("#1E8FCD")
.stroke("#4b9bc6")
setupSeries(actSeries, 'Active');

// create a series with the mapped recovered data
var recSeries = chart.splineArea(recoveredData)
.fill("#B3C67D")
.stroke("#b9c1a0")
setupSeries(recSeries, 'Recovered');

// create a series with the mapped deaths data
var deathsSeries = chart.splineArea(deathsData)
.fill("#b3315d")
.stroke("#b5617d")
setupSeries(deathsSeries, 'Deaths');

看看我在一開始在GIF中顯示的最終交互式JavaScript堆積百分比百分比圖表：

您可以在下面找到此數據可視化的全部代碼，并在AnyChart Playground上找到最終的JS百分比堆積面積圖：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Stacked Area Chart</title>
  <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
  <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
  <script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
    <script>

anychart.onDocumentReady(function () {
  anychart.data.loadCsvFile("http://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
    // set the data and ignore the first row that contains headers
    var dataSet = anychart.data.set(data, {ignoreFirstRow: true});

    // map data for the deaths series
    var deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });

    // map data for the recovered series
    var recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });

    // map data for the active series
    var activeData = dataSet.mapAs({ 'x': 0, 'value': 4 });

    // specify the area chart type
    var chart = anychart.area();

    // helper function to setup series and give them appropriate names in order to distinguish and label them properly
    var setupSeries = function (series, name) {
      series.name(name)
      // setting the markers
      series.hovered().stroke('3 #fff 1');
      series.hovered().markers()
        .enabled(true)
        .type('circle')
        .size(4)
        .stroke('1.5 #fff');
      series.markers().zIndex(100);
    };

    // create a series with the mapped active data
    var actSeries = chart.splineArea(activeData)
    .fill("#1E8FCD")
    .stroke("#4b9bc6")
    setupSeries(actSeries, 'Active');

    // create a series with the mapped recovered data
    var recSeries = chart.splineArea(recoveredData)
    .fill("#B3C67D")
    .stroke("#b9c1a0")
    setupSeries(recSeries, 'Recovered');

    // create a series with the mapped deaths data
    var deathsSeries = chart.splineArea(deathsData)
    .fill("#b3315d")
    .stroke("#b5617d")
    setupSeries(deathsSeries, 'Deaths');
    
    // force the chart to stack values by the y scale
    chart.yScale().stackMode('percent');

    // set the chart title
    chart.title('Covid-19 in Italy');

    // set the labels of the axes
    chart.xAxis().title("Date");
    chart.yAxis().title("Number of people");

    // turn on the crosshair
    var crosshair = chart.crosshair();
    crosshair.enabled(true)
      .yStroke(null)
      .xStroke('#fff')
      .zIndex(39);
    crosshair.yLabel().enabled(false);

    // turn on the legend
    chart.legend(true);

    // turn on the chart animation
    chart.animation(true);

    // set the container id for the chart
    chart.container('container');

    // initiate chart drawing
    chart.draw();
  });
});

</script>
</body>

</html>

結論

恭喜你！您剛剛建立了第一個JavaScript堆積面積圖！這個過程不是很困難，不是嗎？

想要購買Anychart正版授權，或了解更多產品信息請點擊