html Bar_vegalite.html

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Bar_vegalite.html相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>

<script src="../lib/d3.min.js"></script>
<script src="../lib/vega1.5.js"></script>
<script src="../lib/vega-lite.js"></script>

<div id="chart"></div>

<script type="text/javascript">

function parse(spec) {
  vg.parse.spec(spec, function(chart) {
    chart({el:"#chart"}).update(); });
}

var vlspec = {
  "data":{
    "values": [
      {"areas": "A", "value": 5},
      {"areas": "B", "value": 25},
      {"areas": "C", "value": 15},
      {"areas": "D", "value": 20},
      {"areas": "E", "value": 10}
    ]
  },
  "marktype": "bar",
  "encoding": {
    "x": {"type": "Q","name": "value"},
    "y": {"type": "O","name": "areas"}
  },
}

var vgspec = vl.compile(vlspec);
parse(vgspec);

</script>

以上是关于html Bar_vegalite.html的主要内容，如果未能解决你的问题，请参考以下文章

Html.Partial 与 Html.RenderPartial 和 Html.Action 与 Html.RenderAction

html Html模板/ Html Boilerplate |标签HTML