G2Plot之基础使用

引用图表

在 index.html中引用

在head标签里面定义图表

<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<script>
  const { Line } = G2Plot;
  const { Column } = G2Plot;
  const { Bar } = G2Plot;
  const { Area } = G2Plot;
  const { Gauge } = G2Plot;
  const { Pie } = G2Plot;
  const { Histogram } = G2Plot;
  const { Bullet } = G2Plot;
  const { Waterfall } = G2Plot;
  const { Liquid } = G2Plot;
  const { Radar } = G2Plot;
  const { Scatter } = G2Plot;
</script>

在index.md中引用

在md文件头部声明

💡注意不是代码，而是内联HTML。

💡md 在内联HTML中重复定义一个变量，会引起错误。

💡md 内联HTML中代码之间不能存在空换行，不然会引起错误。

当然你并不需要将所有的图表引用，根据自己的需求去引用。md文件的内联HTML代码与html代码，除了上面说的两点注意事项以下基本相同。因此下面将以HTML文件的代码形式进行记录。

图表布局

图表布局我将选择Bootstrap的栅格系统，并使用小屏幕布局.col-sm-。这样的好处就是在手机上面显示也不会影响布局效果。

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <!-- 显示实时净值估算图 -->
            <div id="real-time-graph"></div>
        </div>
        <div class="col-xs-6">
            <!-- 显示单位净值走势图 -->
            <div id="IOPV-graph"></div>
        </div>
        <div class="col-xs-6">
            <!-- 显示规模变动图 -->
            <div id="scale-action-graph"></div>
        </div>
    </div>
</div>

布局没有使用，因为导入Bootstrap 需要在头部进行，而且在当前布局效果并不是太好。

数据处理

在获取数据的时候，我发现js的日期数据与python的日期数据不一样，因此需要在js里面进行数据转化。

function add0(m) {
    return m < 10 ? '0' + m : m
}
function format(date) {
    let time = new Date(parseInt(date));
    let y = time.getFullYear();
    let m = time.getMonth();
    let d = time.getDate();
    return (y + '-' + add0(m) + '-' + add0(d)).toString();
}

相应的代码数据文件为data.js，图表与数据处理文件为tool.js。

简单效果

实现了华宝中证医疗指数（162412）的数据可视化，目前下面的三个图表，实现了累计收益率走势（放大后，数据日期混乱问题，经过多次放大问题恢复正常）、单位净值数据显示（拖动时，需要缓慢拖动，不然红色部分显示异常）、规模变动数据显示，图表分别用到Line、DualAxes、Area这两个图表。

数据目前为21-03-16的数据，因为个人技术的原因受到一定限制，为实现实时获取数据，需要使用我脚本获取网页数据并且自己更新数据文件。如果有服务器一切都会变得简单了。如果对爬取数据感兴趣，你可以下载相应的【代码】。

上面两个问题我个人猜测可能和数据太密集有关，导致数据刷新缓慢。【效果网址】