中文字幕在线亚洲,岛国在线免费观看,日本伦理电影天堂

跨平臺(tái)圖表控件Anychart教程：如何使用JavaScript創(chuàng)建堆積面積圖（下）

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

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

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

相關(guān)鏈接：

AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。

點(diǎn)擊下載AnyChart正式版

本教程分為上下兩個(gè)部分內(nèi)容，本文是下篇，內(nèi)容緊接上文！

自定義JavaScript堆積面積圖

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

添加圖例和動(dòng)畫。
將值更改為百分比。
配置工具提示，標(biāo)記和標(biāo)簽。
更改顏色。

添加圖例和動(dòng)畫

每個(gè)顯示多個(gè)值的圖表都應(yīng)具有圖例，以便于閱讀。

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

我還想通過添加動(dòng)畫來給這張圖表一點(diǎn)哇的效果。您可以通過在圖表的JavaScript代碼中添加一小段代碼來快速實(shí)現(xiàn)此目的：

查看結(jié)果，您可以在AnyChart Playground上找到帶有圖例和動(dòng)畫的JS堆疊區(qū)域圖：

將值更改為百分比

現(xiàn)在，讓我們將堆疊模式從值切換為百分比。這樣，您可以可視化構(gòu)圖如何變化而與總數(shù)無關(guān)。

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

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

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

配置工具提示，標(biāo)記和標(biāo)簽

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

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

在我要設(shè)置系列并添加相應(yīng)標(biāo)題的地方使用此功能：

// 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');

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

這是代碼：

// 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);
};

經(jīng)過這些更改后，圖表的輸出如下：

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

改變顏色

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

這是代碼：

// 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堆積百分比百分比圖表：

您可以在下面找到此數(shù)據(jù)可視化的全部代碼，并在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>

結(jié)論

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

相關(guān)內(nèi)容推薦：

跨平臺(tái)圖表控件Anychart教程：如何使用JavaScript創(chuàng)建堆積面積圖（上）

想要購買Anychart正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊