1前言

日常開發過程中，使用bizcharts組件時，習慣了從官網複製代碼，改改直接放入項目中或者將組件需要的數據以參數的形式傳入到組件，一旦遇到官網沒有的組件類型（一般是組合形式）或者是官網沒有的組件樣式（目前遇到的是座標軸標題），立馬就慌了，問問周圍同事，大家說說沒用，然後費盡口舌告訴產品或者設計實現不了！漸漸的一切變得理所應當了，而自己也變得自以爲是，原來Bizcharts這麼簡單好用呀。直到某一天，在項目中看到了不同的想法時，忙去看官網API，驚歎，原來可以這樣，原來還可以這樣！原來有的時候不是產品無知，而是自己太自以爲是了。嗯！記錄一下，希望自己以後不再人云亦云，一切都在研究後再給出結論。

2所謂不正常的需求以及不常用API

2.1那些年，那些被誤解的需求

混合圖表：分組柱狀圖+面積圖

某天產品出了個原型圖，看第一眼，這不是柱狀圖+面積圖嗎，可以實現的，感覺沒問題。於是，答應下來，去官網找類似圖表，竟然沒有。沒關係，不就是兩個圖的疊加嗎？再加個<Geom/>就是了（靈感來源於折線圖，既有"line"，又有“point”），結果發現①、面積圖和這樁圖起點終點不一致，可以調整，但結果是要麼面積圖能看，要麼柱狀圖能看；②、tooltip出現了兩份；③、數據源的問題無法解決。和同事商量後，告訴產品，無法實現……end。

最近看官網API，發現原來官網早就考慮到這個需求了:View(https://bizcharts.net/product/bizcharts/category/7/page/33)

座標軸的標題位置

跟着原型開發出來了，UI效果圖也出來了，好吧！令人眼花繚亂的顏色也就算了，可以座標軸標題是怎麼回事？橫座標標題和數據一致，縱座標標題也是如此。懶得研究了，和其他前端同事討論，得出結論，座標軸區域怎麼放標題呀！於是，立馬否定了，同事告訴UI小姐姐，以後圖表的的座標軸標題應該放在哪裏哪裏（其實就是官網圖表默認的）。項目緊急，開會時，老大發話，以後圖表都用組件默認的樣式，ok，萬事大吉。

然鵝，意外總比辦法多，UI小姐姐們根本不按照套路出牌，有的是橫座標有標題，有的是縱座標有標題，有的是橫座標和縱座標都有標題，還是放在座標軸內的，而負責人也是睜一隻眼閉一隻眼，實現還是要實現的，和其他同事討論，縱座標的問題倒是可以解決，但是需要設置縱座標的label不能旋轉，有弊端……新的解決方案：<Guide.Text/>(https://bizcharts.net/product/bizcharts/category/7/page/31)

折線圖中標註出部分數據（比如體現集中分佈）

有一個需求：折線圖展示學生的考試分數，中間出現一個類似於面積的覆蓋層，表示集中分佈的分數。原型一出來，第一眼，怎麼這麼眼熟，怎麼這麼眼熟，再看一眼，有點類似於數學中正態分佈的意思，可是轉眼一想，使用代碼怎麼實現，瞬間傻眼了，和其他同事商量，最終結論：做不了。

直到那天，直到我看到了<Guide.Region/>

圖表中出現一條固定的直線（比如全校平均分）

按照學院或者專業展示學生的成績時，要有一條直線，展示全校學生的平均成績，這個需求聽起來很酷，也沒毛病，奈何，就是不知道怎麼實現的！

在官網找了好久的demo，最終在官網demo(https://bizcharts.net/product/bizcharts/demo/67)中獲取靈感，解決了，但是現在回頭看看，或許會有更好的處理方法。

橫座標文字過多時，固定顯示X個字，鼠標懸浮展示全部

不做過多解釋，合情合理，卻又無可奈何，使用過<Axis/>的format，也試過<Chart/>中scale的formatter,奈何，人家只接受字符串，最終，歪打正着使用了<Axis/>的htmlTemplate算是勉強解決，期待後續有新的方法。

2.2那些被遺忘的API

View

官網鏈接：https://bizcharts.net/product/bizcharts/category/7/page/33

概念：視圖，由 Chart 生成和管理，擁有自己獨立的數據源、座標系和圖層，用於異構數據的可視化以及圖表組合，一個 Chart 由一個或者多個視圖 View 組成。因此 view 上的 api 同 chart 基本相同

功能：

在同一個容器中出現兩個或者更多不同座標系的圖表時，可以採用View組件來實現
同一個容器中的兩個圖表需要採用不同的數據源時

父組件：

子組件：

個人理解：

View組件可以實現不同座標系圖表，即一個圖表中可以可以包含其他類似的圖表，比如：分組折線圖和麪積圖組合（數據源不同）
使用時，一般是把<View/>放在<chart/>組件內部，而把<Geom/><Guide/>等放在<View/>內部

舉例1： 區間柱狀圖+面積圖

import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

class Columnrange extends React.Component {
  render() {
    const data = [
      {
        x: "分類一",
        y: [76, 100]
      },
      {
        x: "分類二",
        y: [56, 108]
      },
      {
        x: "分類三",
        y: [38, 129]
      },
      {
        x: "分類四",
        y: [58, 155]
      },
      {
        x: "分類五",
        y: [45, 120]
      },
      {
        x: "分類六",
        y: [23, 99]
      },
      {
        x: "分類七",
        y: [18, 56]
      },
      {
        x: "分類八",
        y: [18, 34]
      }
    ];
    return (
      <div>
        <Chart height={400} data={data} forceFit>
          <Axis name="x" />
          <Axis name="y" />
          <Tooltip />
          <Geom type="interval" position="x*y" />
          <View data={data}>
           <Geom type="area" position="x*y"  tooltip={false}/>
          </View>
        </Chart>
      </div>
    );
  }
}

ReactDOM.render(<Columnrange />, mountNode)

注意：

爲了避免出現雙份的tooltip，需要給其中一個設置 tooltip={false}

案例2：區間柱狀圖+平均值（線）

此處可以理解爲區間柱狀圖+折線圖

代碼：

import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

class Columnrange extends React.Component {
  render() {
    const data = [
      {
        x: "分類一",
        y: [76, 100]
      },
      {
        x: "分類二",
        y: [56, 108]
      },
      {
        x: "分類三",
        y: [38, 129]
      },
      {
        x: "分類四",
        y: [58, 155]
      },
      {
        x: "分類五",
        y: [45, 120]
      },
      {
        x: "分類六",
        y: [23, 99]
      },
      {
        x: "分類七",
        y: [18, 56]
      },
      {
        x: "分類八",
        y: [18, 34]
      }
    ];
    const data2=data.map(item=>{
        return {x:item.x,y2:90}
    })
    console.log('data2',data2);
    return (
      <div>
        <Chart height={400} data={data} forceFit>
          <Axis name="x" />
          <Axis name="y" />
          <Tooltip />
          <Geom type="interval" position="x*y" />
          <View data={data2}>
           <Geom type="line" position="x*y2"   color="#FF966A"/>
          </View>
        </Chart>
      </div>
    );
  }
}

ReactDOM.render(<Columnrange />, mountNode)

注意：

①此處兩圖數據源不一樣（需要的數據類型不一樣）；②此處的折線圖是需要tooltip的；③一般情況需要給設置不同的顏色；④如果是折線圖中設置一條平均值線，則只需要處理數據即可（相當於多增加一條折（直）線，只不過y值一樣）

Guide

官網鏈接：

https://bizcharts.net/product/bizcharts/category/7/page/31

概念：

用於繪製圖表的輔助元素

父組件：

子組件：

個人理解：

①、<Guide/>組件中，實際發揮作用的是其子組件（對應的API ）；

②、<View>和<Guide/>可以組合使用

案例1：

增加一條輔助線，表示全校平均分輸

import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

class Columnrange extends React.Component {
  render() {
    const data = [
      {
        x: "分類一",
        y: [76, 100]
      },
      {
        x: "分類二",
        y: [56, 108]
      },
      {
        x: "分類三",
        y: [38, 129]
      },
      {
        x: "分類四",
        y: [58, 155]
      },
      {
        x: "分類五",
        y: [45, 120]
      },
      {
        x: "分類六",
        y: [23, 99]
      },
      {
        x: "分類七",
        y: [18, 56]
      },
      {
        x: "分類八",
        y: [18, 34]
      }
    ];
    return (
      <div>
        <Chart height={400} data={data} forceFit>
          <Axis name="x" />
          <Axis name="y" />
          <Tooltip />
          <Geom type="interval" position="x*y" />
          <Guide>
            <Guide.Line
            top
           start={['0%','50%']}
             end={['100%','50%']}
             lineStyle={{ stroke: '#F00',lineWidth:3,lineDash:[0],
              fill: '#F00',}}
                text={{
                position: 'start', // 'start' | 'center' | 'end' | '39%' | 0.5 文本的顯示位置
                autoRotate: true, // {boolean} 是否沿線的角度排布，默認爲 true
                style: {
                  fill: 'red',
                }, // {object}文本圖形樣式配置,https://bizcharts.net/products/bizCharts/api/graphic#文本屬性
                offsetX: 10, // {number} x 方向的偏移量
                offsetY: -10, // {number} y 方向的偏移量
                content: '全校平均分數', // {string} 文本的內容
              }}  
            />
          </Guide>
        </Chart>
      </div>
    );
  }
}

ReactDOM.render(<Columnrange />, mountNode)

注意：

輔助線的內容不會自動加載tooltip中，如果需要可自定義tooltip

案例2：

折線圖中標識出數據集中展示的區域

import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

class Curved extends React.Component {
  render() {
    const data = [
      {
          month: "Jan",
          city: "Tokyo",
          temperature: 7
      },
      {
          month: "Jan",
          city: "London",
          temperature: 3.9
      },
      {
          month: "Feb",
          city: "Tokyo",
          temperature: 6.9
      },
      {
          month: "Feb",
          city: "London",
          temperature: 4.2
      },
      {
          month: "Mar",
          city: "Tokyo",
          temperature: 9.5
      },
      {
          month: "Mar",
          city: "London",
          temperature: 5.7
      },
      {
          month: "Apr",
          city: "Tokyo",
          temperature: 14.5
      },
      {
          month: "Apr",
          city: "London",
          temperature: 8.5
      },
      {
          month: "May",
          city: "Tokyo",
          temperature: 18.4
      },
      {
          month: "May",
          city: "London",
          temperature: 11.9
      },
      {
          month: "Jun",
          city: "Tokyo",
          temperature: 21.5
      },
      {
          month: "Jun",
          city: "London",
          temperature: 15.2
      },
      {
          month: "Jul",
          city: "Tokyo",
          temperature: 25.2
      },
      {
          month: "Jul",
          city: "London",
          temperature: 17
      },
      {
          month: "Aug",
          city: "Tokyo",
          temperature: 26.5
      },
      {
          month: "Aug",
          city: "London",
          temperature: 16.6
      },
      {
          month: "Sep",
          city: "Tokyo",
          temperature: 23.3
      },
      {
          month: "Sep",
          city: "London",
          temperature: 14.2
      },
      {
          month: "Oct",
          city: "Tokyo",
          temperature: 18.3
      },
      {
          month: "Oct",
          city: "London",
          temperature: 10.3
      },
      {
          month: "Nov",
          city: "Tokyo",
          temperature: 13.9
      },
      {
          month: "Nov",
          city: "London",
          temperature: 6.6
      },
      {
          month: "Dec",
          city: "Tokyo",
          temperature: 9.6
      },
      {
          month: "Dec",
          city: "London",
          temperature: 4.8
      }
    ];
    const cols = {
      month: {
        range: [0, 1]
      }
    };
    return (
      <div>
        <Chart height={400} data={data} scale={cols} forceFit>
          <Legend />
          <Axis name="month" />
          <Axis
            name="temperature"
            label={{
              formatter: val => `${val}°C`
            }}
          />
          <Tooltip
            crosshairs={{
              type: "y"
            }}
          />
          <Geom
            type="line"
            position="month*temperature"
            size={2}
            color={"city"}
            shape={"smooth"}
          />
          <Geom
            type="point"
            position="month*temperature"
            size={4}
            shape={"circle"}
            color={"city"}
            style={{
              stroke: "#fff",
              lineWidth: 1
            }}
          />
           <Guide>
           <Guide.Region
            top // 指定 giude 是否繪製在 canvas 最上層，默認爲 false, 即繪製在最下層
            start={['40%', '0%']} // 輔助框起始位置，值爲原始數據值，支持 callback
            end={['60%', '100%']} // 輔助框結束位置，值爲原始數據值，支持 callback
            style={{
              lineWidth: 1, // 輔助框的邊框寬度
              fill: '#f80', // 輔助框填充的顏色
              fillOpacity: 0.1, // 輔助框的背景透明度
              stroke: '#ccc', // 輔助框的邊框顏色設置
            }} // 輔助框的圖形樣式屬性
          />
          </Guide>
        </Chart>
       
      </div>
    );
  }
}

ReactDOM.render(<Curved />, mountNode)

案例3：

座標軸標題的顯示：座標軸標題與座標軸label在同一水平線上

代碼：

import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

class Columnrange extends React.Component {
  render() {
    const data = [
      {
        x: "分類一",
        y: [76, 100]
      },
      {
        x: "分類二",
        y: [56, 108]
      },
      {
        x: "分類三",
        y: [38, 129]
      },
      {
        x: "分類四",
        y: [58, 155]
      },
      {
        x: "分類五",
        y: [45, 120]
      },
      {
        x: "分類六",
        y: [23, 99]
      },
      {
        x: "分類七",
        y: [18, 56]
      },
      {
        x: "分類八",
        y: [18, 34]
      }
    ];
    return (
      <div>
        <Chart height={400} data={data} forceFit>
          <Axis name="x" />
          <Axis name="y" />
          <Tooltip />
          <Geom type="interval" position="x*y" />
          <Guide>
           <Guide.Text
              top
              position={['98%', '106%']}
              content="國家"
              style={{
                fontSize: 13,
                fill: '#999999',
              }}
            />
        
          <Guide.Text
              top
              position={ ['-6%', '-6%']}
              content={"(種)"}
              style={{
                fontSize: 13,
                fill: '#999999',
              }}
            />
          
          </Guide>
        </Chart>
      </div>
    );
  }
}

ReactDOM.render(<Columnrange />, mountNode)

自定義橫座標

需求：

超過4個字後，以三個點展示，鼠標懸浮則展示全部

代碼：

import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

class Columnrange extends React.Component {
  render() {
    const data = [
      {
        x: "分類一",
        y: [76, 100]
      },
      {
        x: "何分類二",
        y: [56, 108]
      },
      {
        x: "分類三",
        y: [38, 129]
      },
      {
        x: "分類四",
        y: [58, 155]
      },
      {
        x: "分類五",
        y: [45, 120]
      },
      {
        x: "分類六",
        y: [23, 99]
      },
      {
        x: "何碧雲富饒分類七",
        y: [18, 56]
      },
      {
        x: "分類八",
        y: [18, 34]
      }
    ];
    return (
      <div>
        <Chart height={400} data={data} forceFit>
          <Axis name="x" 
            label={{
            textStyle: {
              fill: '#fff',
            },
            htmlTemplate(text: any) {
              if (text && text.length > 3) {
                return `<div title=${text} style="min-width: 60px;text-align: center"> ${text.slice(
                  0,
                  3,
                )}...</div>`;
              }
              return `<div style="min-width: 120px;text-align: center">${text}</div>`;
            },
          }}
          />
          <Axis name="y" />
          <Tooltip />
          <Geom type="interval" position="x*y" />
        </Chart>
      </div>
    );
  }
}

ReactDOM.render(<Columnrange />, mountNode)

3寫在後面

2020年都已經快過去四分之一了，不要把情緒帶到工作中，嗯！不要生氣，好好工作、認真學習，如此足矣。

Bizcharts 之不常用API學習記錄

1前言

2所謂不正常的需求以及不常用API

2.1那些年，那些被誤解的需求

混合圖表：分組柱狀圖+面積圖

座標軸的標題位置

折線圖中標註出部分數據（比如體現集中分佈）

圖表中出現一條固定的直線（比如全校平均分）

橫座標文字過多時，固定顯示X個字，鼠標懸浮展示全部

2.2那些被遺忘的API

View

Guide

自定義橫座標

3寫在後面

在git上創建項目（最簡單上手）

Bizchart圖表封裝之分組箱型圖（自定義圖例、設置Slider）

Bizchart圖表封裝之基礎箱型圖（自定義圖例、設置Slider）

bizcharts圖表封裝之基礎(單)面積圖（帶Slider）

bizcharts圖表封裝之百分比堆疊柱狀圖（可設置Slider）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結