[js]roughViz.js 手绘风格的网页图表js库

2020-01-05  本文已影响0人  httIsHere

title: roughViz.js 手绘风格的网页图表js库
date: 2020-01-05 14:58:15
tags:

cover

是一个非常个性化的图标插件，且可以根据自己喜好变换出很多不同的显示样式。
推荐：★★★★☆

支持图表类型

cdn

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

npm

npm install rough-viz
npm install react-roughviz
npm install vue-roughviz

use

data 处理有三种方式：

// add this to abstract base
  resolveData(data) {
    if (typeof data === 'string') {
      if (data.includes('.csv')) {
        return () => {
          csv(data).then(d => {
            // console.log(d);
            this.data = d;
            this.drawFromFile();
          });
        };
      } else if (data.includes('.tsv')) {
        return () => {
          tsv(data).then(d => {
            this.data = d;
            this.drawFromFile();
          });
        };
      }
    } else {
      return () => {
        this.data = data;
        this.drawFromObject();
      };
    }
  }

How to use

<!-- container -->
<div id="vis0"></div>

// bar chart
new roughViz.Bar({
  element: "#vis0", // container selection
  data: {
    flavor: ["North", "South", "East", "West"],
    price: [10, 5, 8, 3]
  },
  labels: "flavor",
  values: "price"
});

// Horizontal Bar Chart
new roughViz.BarH({
  element: "#vis2",
  title: "Vehicles I've Had",
  data: {
    labels: [
      "1992 Ford Aerostar Van",
      "2013 Kia Rio",
      "1980 Honda CB 125s",
      "1992 Toyota Tercel"
    ],
    values: [8, 4, 6, 2]
  },
  xLabel: "Time Owned (Years)"
});

// Donut chart
new roughViz.Donut({
  element: "#vis1",
  data: {
    labels: ["North", "South", "East", "West"],
    values: [10, 5, 8, 3]
  }
});

// line chart
new roughViz.Line({
  element: "#vis3",
  data:
    "https://raw.githubusercontent.com/jwilber/random_data/master/tweets.csv",
  title: "Line Chart",
  y: "favorites",
  y2: "retweets",
  y3: "tweets",
  yLabel: "hey"
});

// pie chart
new roughViz.Pie({
  element: "#vis4",
  titleFontSize: "1.5rem",
  data: {
    labels: ["yes", "no", "lol idk man"],
    values: [2, 8, 4]
  },
  title: "'Yarn Plot': Useful?"
});

// Scatter chart
new roughViz.Scatter({
  element: "#vis5",
  data:
    "https://raw.githubusercontent.com/uiuc-cse/data-fa14/gh-pages/data/iris.csv",
  title: "Iris Scatter Plot",
  x: "sepal_width",
  y: "petal_length",
  colorVar: "species",
  highlightLabel: "species",
  fillWeight: 4,
  radius: 12,
  colors: ["pink", "coral", "skyblue"],
  stroke: "black",
  strokeWidth: 0.4,
  roughness: 1,
  width: 400,
  height: 450,
  font: 0,
  xLabel: "sepal width",
  yLabel: "petal length",
  curbZero: false
});
// Stacked Bar chart
new roughViz.StackedBar({
  element: "#vis6",
  data: [
    {
      month: "Jan",
      A: 20,
      B: 5,
      C: 10
    },
    {
      month: "Feb",
      A: 25,
      B: 10,
      C: 20
    },
    {
      month: "March",
      A: 30,
      B: 50,
      C: 10
    }
  ],
  labels: "month",
  title: "Monthly Revenue",
  roughness: 2,
  colors: ["blue", "#f996ae", "skyblue", "#9ff4df"],
  fillWeight: 0.35,
  strokeWidth: 0.5,
  fillStyle: "cross-hatch",
  stroke: "black"
});

在原本基础的图形表现上，还可以自定义图表显示样式，从而使图表更具独特风格。

fillStyle


rough_fillStyles

roughness


roughViz_roughnessbars

fillWeight


roughViz_fillweight

传送门 roughViz github

上一篇 下一篇

猜你喜欢

热点阅读