在瀏覽器中創建漂亮的手繪風格圖表，數據可視化JavaScript庫介紹

用rawViz JavaScript庫在瀏覽器中創建漂亮的圖表

oughViz圖表庫-https

在通信目標是顯示意圖或普遍性而非絕對精度的地方，請使用手繪圖。或者僅僅是因為它們很有趣并且看起來很酷。

（https://github.com/jwilber/roughViz#Bar）

Github上的roughViz圖表庫源代碼—

oughViz庫包含的內容

以下是當前可用的圖表類型（更多內容即將推出）：

· 條形（roughViz.Bar）-完整的API文檔。

oughviz條形示例—

· 單杠（roughViz.BarH）—在此處查看完整的API。

rawviz單杠示例—

· 甜甜圈（roughViz.Donut）

甜甜圈圖示例-

· 第（roughViz.Line）行-API

折線圖示例-

· 餅圖（roughViz.Pie）

餅圖演示—

· 散點圖（roughViz.Scatter）

散點圖示例-

入門

通過CDN：

<script src =" https://unpkg.com/rough-viz@1.0.2"> </ script>

通過npm：

npm install rough-viz

想要搭配使用React？有一個包裝。

npm install react-roughviz

如何使用

創建一些容器元素，每個圖表一個：

<!--you can name each id whatever you want -->
<div id="viz0"></div>
<div id="viz1"></div>

要創建圖表，請引用所需的容器，然后將數據傳遞給roughViz構造函數。

// create donut chart from csv file, using default options
 new roughViz.Bar({
 element: '#vis0', // container selection
 data: 'https://raw.githubusercontent.com/jwilber/random_data/master/flavors.csv',
 labels: 'flavor',
 values: 'price'
});
// create Donut chart using defined data & customize plot options
new roughViz.Donut(
 {
 element: '#vis1',
 data: {
 labels: ['North', 'South', 'East', 'West'],
 values: [10, 5, 8, 3]
 },
 title: "Regions",
 width: window.innerWidth / 4,
 roughness: 8,
 colors: ['red', 'orange', 'blue', 'skyblue'],
 stroke: 'black',
 strokeWidth: 3,
 fillStyle: 'cross-hatch',
 fillWeight: 3.5,
 }
);

樣式表

有樣式圖表方式主要有三種- roughness，fillStyle和fillWeight

粗糙度

fillStyle

fillWeight

包括更多其他特定于圖表的選項- 有關更多信息，。

感謝您的閱讀，并保持出色！

挑戰30天在頭條寫日記#

功能：

顏色插件

Chart.js 品牌顏色的默認調色板可作為內置的省時零配置插件使用。

Tree-shaking

通過僅注冊必要的組件，JavaScript 包的大小可以減少數十千字節。

規模堆疊

布局框可以按組堆疊和加權。

字幕插件

輔助標題插件，具有與主標題相同的所有選項。

線段樣式

線段可以根據任何用戶定義的標準設置樣式。

3.0新功能高級動畫

每個元素中每個屬性的轉換都可以單獨且獨立地配置。

新功能表現！

引入了許多性能增強功能。此示例具有 1M (2x500k) 點，啟用了新的抽取插件。

2.0新功能混合圖表類型

混合搭配條形圖和折線圖，以在數據集之間提供清晰的視覺區分。

2.0新功能新的圖表軸類型

輕松繪制日期時間、對數甚至完全自定義比例的復雜、稀疏數據集。

2.0新功能動畫一切！

更改數據、更新顏色和添加數據集時，開箱即用的令人驚嘆的過渡。

使用Demo-創建圖表

在此示例中，我們為單個數據集創建條形圖并將其呈現在 HTML 頁面上。將此代碼片段添加到您的頁面：

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

你應該得到一個像這樣的圖表：

讓我們分解一下這段代碼。

首先，我們的頁面中需要有一個畫布。建議為圖表提供自己的容器以提高響應能力。

<div>
  <canvas id="myChart"></canvas>
</div>

現在我們有了畫布，我們可以包含來自 CDN 的 Chart.js。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

最后，我們可以創建一個圖表。我們添加一個腳本，該腳本獲取myChart畫布元素并new Chart使用所需的配置進行實例化：bar圖表類型、標簽、數據點和選項。

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Chart.js 的所有主要概念：

圖表類型和元素、數據集、自定義、插件、組件和 tree-shaking。不要猶豫，點擊文本中的鏈接。

我們將從頭開始使用幾個圖表構建 Chart.js 數據可視化：

使用 Chart.js 構建新應用程序

在新文件夾中，創建package.json包含以下內容的文件：

{
  "name": "chartjs-example",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "devDependencies": {
    "parcel": "^2.6.2"
  },
  "dependencies": {
    "@cubejs-client/core": "^0.31.0",
    "chart.js": "^4.0.0"
  }
}

現代前端應用程序經常使用 JavaScript 模塊捆綁器，因此我們選擇Parcel 作為一個很好的零配置構建工具。我們還安裝了 Chart.js v4 和Cube 的 JavaScript 客戶端，這是一個用于數據應用程序的開源 API，我們將使用它來獲取真實世界的數據（稍后會詳細介紹）。

運行npm install、yarn install、或pnpm install安裝依賴項，然后創建src文件夾。在該文件夾中，我們需要一個非常簡單的index.html文件：

<!doctype html>
<html lang="en">
  <head>
    <title>Chart.js example</title>
  </head>
  <body>
    <!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
    <div style="width: 800px;"><canvas id="acquisitions"></canvas></div>

    <!-- <script type="module" src="dimensions.js"></script> -->
    <script type="module" src="acquisitions.js"></script>
  </body>
</html>

正如您所看到的，Chart.js 需要最少的標記：canvas帶有的標記id，我們稍后將通過它引用圖表。默認情況下，Chart.js 圖表是響應式的，并占據整個封閉容器。所以，我們設置寬度div來控制圖表的寬度。

最后，讓我們創建src/acquisitions.js包含以下內容的文件：

import Chart from 'chart.js/auto'

(async function() {
  const data = [
    { year: 2010, count: 10 },
    { year: 2011, count: 20 },
    { year: 2012, count: 15 },
    { year: 2013, count: 25 },
    { year: 2014, count: 22 },
    { year: 2015, count: 30 },
    { year: 2016, count: 28 },
  ];

  new Chart(
    document.getElementById('acquisitions'),
    {
      type: 'bar',
      data: {
        labels: data.map(row => row.year),
        datasets: [
          {
            label: 'Acquisitions by year',
            data: data.map(row => row.count)
          }
        ]
      }
    }
  );
})();

讓我們看一下這段代碼：

我們Chart從特殊路徑導入 Chart.js 主類chart.js/auto。它加載所有可用的 Chart.js 組件（這非常方便），但不允許進行樹搖動。我們稍后會解決這個問題。
我們實例化一個新Chart實例并提供兩個參數：將呈現圖表的畫布元素和選項對象。
我們只需要提供一個圖表類型 ( bar) 并提供data它由labels（通常是數據點的數字或文本描述）和一個數組datasets（Chart.js 支持大多數圖表類型的多個數據集）組成。每個數據集都用 a 指定，label并包含一個數據點數組。
目前，我們只有一些虛擬數據條目。因此，我們提取year和count屬性來生成labels唯一數據集中的和數據點數組。

是時候使用npm run dev、yarn dev、或運行示例并在 Web 瀏覽器中pnpm dev導航到localhost:1234 了：

只需幾行代碼，我們就得到了一個具有很多功能的圖表：圖例、網格線、刻度線和懸停時顯示的工具提示。刷新網頁幾次即可看到圖表也是動畫的。嘗試單擊“按年份獲取”標簽，您會發現您還可以切換數據集可見性（當您有多個數據集時特別有用）。

簡單的定制

讓我們看看如何自定義 Chart.js 圖表。首先，讓我們關閉動畫，以便立即顯示圖表。其次，讓我們隱藏圖例和工具提示，因為我們只有一個數據集和相當瑣碎的數據。

將調用new Chart(...);替換src/acquisitions.js為以下代碼片段：

  new Chart(
    document.getElementById('acquisitions'),
    {
      type: 'bar',
      options: {
        animation: false,
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            enabled: false
          }
        }
      },
      data: {
        labels: data.map(row => row.year),
        datasets: [
          {
            label: 'Acquisitions by year',
            data: data.map(row => row.count)
          }
        ]
      }
    }
  );

正如您所看到的，我們已將該options屬性添加到第二個參數中，這樣您就可以為 Chart.js 指定各種自定義選項。通過提供的布爾標志禁用動畫animation。大多數圖表范圍的選項（例如，響應能力或設備像素比）都是這樣配置的。

圖例和工具提示隱藏在plugins. 請注意，Chart.js 的一些功能被提取到插件中：獨立的、獨立的代碼片段。其中一些插件作為Chart.js 發行版的一部分提供，其他插件是獨立維護的，并且可以位于很棒的插件、框架集成和其他圖表類型列表中。

您應該能夠在瀏覽器中看到更新后的簡約圖表。

真實世界數據

對于硬編碼、有限大小、不切實際的數據，很難展示 Chart.js 的全部潛力。讓我們快速連接到數據 API，以使我們的示例應用程序更接近生產用例。

讓我們創建src/api.js包含以下內容的文件：

import { CubejsApi } from '@cubejs-client/core';

const apiUrl = 'https://heavy-lansford.gcp-us-central1.cubecloudapp.dev/cubejs-api/v1';
const cubeToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjEwMDAwMDAwMDAsImV4cCI6NTAwMDAwMDAwMH0.OHZOpOBVKr-sCwn8sbZ5UFsqI3uCs6e4omT7P6WVMFw';

const cubeApi = new CubejsApi(cubeToken, { apiUrl });

export async function getAquisitionsByYear() {
  const acquisitionsByYearQuery = {
    dimensions: [
      'Artworks.yearAcquired',
    ],
    measures: [
      'Artworks.count'
    ],
    filters: [ {
      member: 'Artworks.yearAcquired',
      operator: 'set'
    } ],
    order: {
      'Artworks.yearAcquired': 'asc'
    }
  };

  const resultSet = await cubeApi.load(acquisitionsByYearQuery);

  return resultSet.tablePivot().map(row => ({
    year: parseInt(row['Artworks.yearAcquired']),
    count: parseInt(row['Artworks.count'])
  }));
}

export async function getDimensions() {
  const dimensionsQuery = {
    dimensions: [
      'Artworks.widthCm',
      'Artworks.heightCm'
    ],
    measures: [
      'Artworks.count'
    ],
    filters: [
      {
        member: 'Artworks.classification',
        operator: 'equals',
        values: [ 'Painting' ]
      },
      {
        member: 'Artworks.widthCm',
        operator: 'set'
      },
      {
        member: 'Artworks.widthCm',
        operator: 'lt',
        values: [ '500' ]
      },
      {
        member: 'Artworks.heightCm',
        operator: 'set'
      },
      {
        member: 'Artworks.heightCm',
        operator: 'lt',
        values: [ '500' ]
      }
    ]
  };

  const resultSet = await cubeApi.load(dimensionsQuery);

  return resultSet.tablePivot().map(row => ({
    width: parseInt(row['Artworks.widthCm']),
    height: parseInt(row['Artworks.heightCm']),
    count: parseInt(row['Artworks.count'])
  }));
}

讓我們看看那里發生了什么：

我們為Cubeimport （數據應用程序的開源 API）提供 JavaScript 客戶端庫，使用 API URL ( ) 和身份驗證令牌 ( ) 配置它，最后實例化客戶端 ( )。 apiUrlcubeTokencubeApi
Cube API 托管在Cube Cloud 中，并連接到一個數據庫，該數據庫包含約 140,000 條記錄的公共數據集，代表美國紐約現代藝術博物館收藏的所有藝術品。當然，這是一個比我們現在擁有的更真實的數據集。
我們定義了幾個異步函數來從 API 獲取數據：getAquisitionsByYear和getDimensions。第一個返回按購買年份計算的藝術品數量，另一個返回每個寬度-高度對的藝術品數量（我們將在另一個圖表中需要它）。
我們來看一下getAquisitionsByYear。首先，我們在變量中創建一個基于 JSON 的聲明性查詢acquisitionsByYearQuery。正如您所看到的，我們指定了每件yearAcquired我們想要獲得count的藝術品；yearAcquired必須設置（即不是未定義）；結果集將按yearAcquired升序排序。
其次，我們resultSet通過調用獲取并將其映射到具有所需屬性cubeApi.load的對象數組。yearcount

現在，讓我們將真實世界的數據傳遞到我們的圖表中。請進行一些更改src/acquisitions.js：添加導入并替換data變量的定義。

import { getAquisitionsByYear } from './api'

// ...

const data = await getAquisitionsByYear();

完畢！現在，我們的真實數據圖表如下所示。看來1964年、1968年和2008年發生了一些有趣的事情！

我們已經完成了條形圖。讓我們嘗試另一種 Chart.js 圖表類型。

進一步定制

Chart.js 支持許多常見的圖表類型。

例如，氣泡圖允許同時顯示三個維度的數據：x和y軸上的位置代表兩個維度，第三個維度由單個氣泡的大小表示。

要創建圖表，請停止已運行的應用程序，然后轉到src/index.html并取消注釋以下兩行：

<div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/>

<script type="module" src="dimensions.js"></script>

然后，創建src/dimensions.js包含以下內容的文件：

import Chart from 'chart.js/auto'
import { getDimensions } from './api'

(async function() {
  const data = await getDimensions();

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      data: {
        labels: data.map(x => x.year),
        datasets: [
          {
            label: 'Dimensions',
            data: data.map(row => ({
              x: row.width,
              y: row.height,
              r: row.count
            }))
          }
        ]
      }
    }
  );
})();

也許，一切都非常簡單：我們從 API 獲取數據并渲染一個具有該類型的新圖表，將三個維度的數據作為、和（半徑）屬性bubble傳遞。xyr

現在，使用、或重置緩存并再次啟動rm -rf .parcel-cache應用程序。我們現在可以查看新圖表：npm run devyarn devpnpm dev

嗯，看起來不太漂亮。

首先，圖表不是正方形的。藝術品的寬度和高度同樣重要，因此我們希望圖表的寬度也等于其高度。默認情況下，Chart.js 圖表的縱橫比為 1（對于所有徑向圖表，例如圓環圖）或 2（對于所有其他圖表）。讓我們修改圖表的縱橫比：

// ...

	new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      options: {
        aspectRatio: 1,
      },

// ...

現在看起來好多了：

然而，這仍然不理想。水平軸的范圍從 0 到 500，垂直軸的范圍從 0 到 450。默認情況下，Chart.js 會自動將軸的范圍（最小值和最大值）調整為數據集中提供的值，因此圖表“適合“你的數據。顯然，MoMa 收藏中沒有高度在 450 至 500 厘米范圍內的藝術品。讓我們修改圖表的軸配置來解決這個問題：

// ...

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      options: {
        aspectRatio: 1,
        scales: {
          x: {
            max: 500
          },
          y: {
            max: 500
          }
        }
      },

// ...

偉大的！看一下更新后的圖表：

然而，還有一個問題：這些數字是多少？單位是厘米不是很明顯。讓我們對兩個軸應用自定義刻度格式以使事情變得清晰。我們將提供一個回調函數，調用該函數來格式化每個刻度值。這是更新后的軸配置：

// ...

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      options: {
        aspectRatio: 1,
        scales: {
          x: {
            max: 500,
            ticks: {
              callback: value => `${value / 100} m`
            }
          },
          y: {
            max: 500,
            ticks: {
              callback: value => `${value / 100} m`
            }
          }
        }
      },

// ...

完美，現在我們在兩個軸上都有合適的單位：

多個數據集

Chart.js 獨立繪制每個數據集，并允許對它們應用自定義樣式。

看一下圖表：有一條可見的氣泡“線”，其等號x和y坐標代表方形藝術品。將這些氣泡放入自己的數據集中并以不同的方式繪制它們會很酷。此外，我們可以將“較高”的藝術品與“較寬”的藝術品分開，并以不同的方式繪制它們。

我們可以這樣做。將其替換datasets為以下代碼：

// ...

        datasets: [
          {
            label: 'width = height',
            data: data
              .filter(row => row.width === row.height)
              .map(row => ({
                x: row.width,
                y: row.height,
                r: row.count
              }))
          },
          {
            label: 'width > height',
            data: data
              .filter(row => row.width > row.height)
              .map(row => ({
                x: row.width,
                y: row.height,
                r: row.count
              }))
          },
          {
            label: 'width < height',
            data: data
              .filter(row => row.width < row.height)
              .map(row => ({
                x: row.width,
                y: row.height,
                r: row.count
              }))
          }
        ]

// ..

如您所見，我們定義了三個具有不同標簽的數據集。每個數據集都有自己的使用提取的數據片段filter。現在，它們在視覺上是不同的，而且正如您所知，您可以獨立切換它們的可見性。

這里我們依賴默認的調色板。但是，請記住，每種圖表類型都支持許多數據集選項，您可以隨意自定義。

插件

另一種非常強大的自定義 Chart.js 圖表的方法是使用插件。您可以在插件目錄中找到一些或創建您自己的臨時插件。在 Chart.js 生態系統中，這是慣用的，并且期望通過插件來微調圖表。例如，您可以自定義畫布背景或使用簡單的臨時插件為其添加邊框。讓我們嘗試一下后者。

插件具有廣泛的 API，但簡而言之，插件被定義為name具有擴展點中定義的一個或多個回調函數的對象。new Chart(...);在調用之前插入以下代碼片段來代替src/dimensions.js：

// ...

  const chartAreaBorder = {
    id: 'chartAreaBorder',

    beforeDraw(chart, args, options) {
      const { ctx, chartArea: { left, top, width, height } } = chart;

      ctx.save();
      ctx.strokeStyle = options.borderColor;
      ctx.lineWidth = options.borderWidth;
      ctx.setLineDash(options.borderDash || []);
      ctx.lineDashOffset = options.borderDashOffset;
      ctx.strokeRect(left, top, width, height);
      ctx.restore();
    }
  };

  new Chart(
    document.getElementById('dimensions'),
    {
      type: 'bubble',
      plugins: [ chartAreaBorder ],
      options: {
        plugins: {
          chartAreaBorder: {
            borderColor: 'red',
            borderWidth: 2,
            borderDash: [ 5, 5 ],
            borderDashOffset: 2,
          }
        },
        aspectRatio: 1,

// ...

正如您所看到的，在這個chartAreaBorder插件中，我們獲取畫布上下文，保存其當前狀態，應用樣式，在圖表區域周圍繪制矩形，然后恢復畫布狀態。我們還傳遞了該插件，plugins因此它僅適用于這個特定的圖表。我們還將插件選項傳遞給options.plugins.chartAreaBorder; 我們當然可以在插件源代碼中對它們進行硬編碼，但這種方式可重用性更高。

我們的氣泡圖現在看起來更漂亮了：

搖樹

在生產中，我們努力交付盡可能少的代碼，以便最終用戶可以更快地加載我們的數據應用程序并獲得更好的體驗。為此，我們需要應用tree-shaking ，這是一個奇特的術語，用于從 JavaScript 包中刪除未使用的代碼。

Chart.js 的組件設計完全支持 tree-shaking。您可以一次注冊所有 Chart.js 組件（這在您進行原型設計時很方便）并將它們與您的應用程序捆綁在一起。或者，您可以僅注冊必要的組件并獲得最小的捆綁包，其大小要小得多。

讓我們檢查一下我們的示例應用程序。捆綁包尺寸是多少？您可以停止應用程序并運行npm run build, 或yarn build, 或pnpm build。片刻之后，您將得到如下信息：

% yarn build
yarn run v1.22.17
$ parcel build src/index.html
? Built in 88ms

dist/index.html              381 B   164ms
dist/index.74a47636.js   265.48 KB   1.25s
dist/index.ba0c2e17.js       881 B    63ms
? Done in 0.51s.

我們可以看到 Chart.js 和其他依賴項被捆綁在一個 265 KB 文件中。

src/acquisitions.js為了減小包的大小，我們需要對和進行一些更改src/dimensions.js。首先，我們需要從兩個文件中刪除以下導入語句：import Chart from 'chart.js/auto'.

相反，我們只加載必要的組件并使用 Chart.js“注冊”它們Chart.register(...)。這是我們需要的src/acquisitions.js：

import {
  Chart,
  Colors,
  BarController,
  CategoryScale,
  LinearScale,
  BarElement,
  Legend
} from 'chart.js'

Chart.register(
  Colors,
  BarController,
  BarElement,
  CategoryScale,
  LinearScale,
  Legend
);

這是以下代碼片段src/dimensions.js：

import {
  Chart,
  Colors,
  BubbleController,
  CategoryScale,
  LinearScale,
  PointElement,
  Legend
} from 'chart.js'

Chart.register(
  Colors,
  BubbleController,
  PointElement,
  CategoryScale,
  LinearScale,
  Legend
);

您可以看到，除了Chart類之外，我們還加載圖表類型、比例和其他圖表元素（例如，條形圖或點）的控制器。您可以在文檔中查找所有可用的組件。

或者，您可以按照控制臺中的 Chart.js 建議進行操作。例如，如果您忘記導入BarController條形圖，您將在瀏覽器控制臺中看到以下消息：

Unhandled Promise Rejection: Error: "bar" is not a registered controller.

chart.js/auto請記住在準備生產應用程序時仔細檢查進口。只需要一次這樣的導入就可以有效地禁用樹搖動。

現在，讓我們再次檢查我們的應用程序。運行yarn build你會得到這樣的結果：

% yarn build
yarn run v1.22.17
$ parcel build src/index.html
? Built in 88ms

dist/index.html              381 B   176ms
dist/index.5888047.js    208.66 KB   1.23s
dist/index.dcb2e865.js       932 B    58ms
? Done in 0.51s.

過僅導入和注冊選定的組件，我們刪除了超過 56 KB 的不必要代碼。鑒于其他依賴項在捆綁包中占用約 50 KB，tree-shaking 有助于從我們的示例應用程序的捆綁包中刪除約 25% 的 Chart.js 代碼。

項目地址：https://github.com/chartjs/Chart.js

輯導讀：在用Axure繪制原型時，可以通過內聯框架引入echarts動態圖表、視頻等來讓原型看起來更為高大上。具體應該如何操作呢？本文作者對此進行了分析，希望對你有幫助。

Axure繪制原型時，如何讓原型看起來更為高大上？我們可以在制作原型時通過內聯框架引入echarts動態圖表、視頻等。

效果預覽：

引入echarts漸變堆疊面積圖-預覽：

引入視頻-預覽：

一、Axure引入echarts圖表

1）添加內聯框架

Axure新建頁面，在基本元件中選擇【內聯框架】，拖拽進頁面，點擊【樣式】，勾選隱藏邊框；

2）選擇echarts圖表

進入echarts官網：https://echarts.apache.org/examples/zh/index.html；選擇你需要插入Axure中的圖表；

進入所選的圖表中，可以對其數據進行修改，修改成自己想要的數據；如下圖所示：

點擊【下載示例】，將修改過后的echarts圖表以html文件格式下載下來；

3）將下載下來的圖表引入到內聯框架中

注：【鏈接一個外部的URL或文件】支持三種引入，相對路徑、絕對路徑很根路徑；

以下我是通過根目錄的方式引入html文件；需要將下載好的圖表html文件放入原型所生成html根目錄文件夾下；

雙擊內聯框架，彈出鏈接屬性，選擇【鏈接一個外部的URL或文件】，填入echarts圖表全稱。

注意：這時只有生成HTML才可以看到圖表信息，如果直接點擊預覽，會報錯【File Not Found】。

二、Axure引入視頻

1）添加內聯框架

同上。

2）通過內聯框架引入視頻

通過內聯框架引入視頻有兩種方式，一種引入本地視頻文件、另外一種引入在線視頻。

引入本地視頻：

將視頻文件放入原型所生成html根目錄文件夾下；

雙擊內聯框架，彈出鏈接屬性，選填入本地視頻全稱。

引入在線視頻：

在這里，我以引入嗶哩嗶哩視頻為例，進入嗶哩嗶哩網站，選擇需要引入的視頻，點【轉發】按鈕，復制【嵌入代碼】；如下圖所示：

將代碼填入【鏈接一個外部的URL或文件】中，刪除下圖中紅框框起來的部分，然后前面加入https: ，最終如右圖所示。

本文由 @小青原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議

在線咨詢

上一篇：大數據分析R語言如何進行線性分析
下一篇：更改電腦文件夾顏色、樣式、圖標，讓文件夾不再是單一的黃色

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商