maybe we can insert list data and use it by index 希望能够注入列表数据并依据序列号来获取对应的数据

[小老虎冲冲冲]

use js insert list data, just like
希望能使用js注入数据，就像这样
doodle.setListData('bar-value', [1, 2, 3, 4, 5]);
and then in .cell element, I can fetch the appropriate data like this
然后，可以在.cell元素中，直接获取对应的数据
width: var('bar-value'); //this will be 1 , 2 , 3, 4, 5
这意味着，按照index获取对应的数据
that means, the first element get 1, the second get 2
you can see my trial in this place:
https://codepen.io/FOXhushiyu/pen/Eewrjq
嗯。。。上次玩的时候，发现微信里能跑，然后就想如果doodle可以做一些业务上的事情的话，其实是完全可以在生产环境投入使用的，在一些例如微信的webview环境里面，
emmm.... it will be useful, with this, I can create chart with doodle, that means, in some webview environment like wechat, I can use doodle in production but not only play with it.

[Yuan Chuan]

@HuShiyuFrontEnd 好建议！

虽然不那么直观，实际上当前可以通过 @use 来添加动态数据:

<css-doodle use="var(--data)">
   height:calc(var(--bar-value) / var(--bar-max-value) * 100%);
   ...
</css-doodle>

<script>
  let values = [200, 100, 200, 326, 435, 556, 689, 237, 568, 129];
  let labels = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", 'ggg'];

  doodle.style.setProperty('--data', `(
     --bar-value: @pick-n(${ values });
     --bar-label: @pick-n(${ labels });
     --bar-max-value: 800;
  )`);
</script>

https://codepen.io/yuanchuan/pen/77207eca12e48c0f054a7c30e1c8e7ed/

唯一的问题是如何在 content 当中使用 CSS 变量值. 可考虑新增一个函数.

---

假设已经有 @get 函数来做这个事，那么可能会稍微直观一点：

<css-doodle>
  height:calc(@pick-n(@get(--bar-value)) / var(--bar-max-value) * 100%);
  :after {
    content: @pick-n(@get(--bar-labels));
  }
</css-doodle>

<script>
  let values = [200, 100, 200, 326, 435, 556, 689, 237, 568, 129];
  let labels = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", 'ggg'];
  let maxValue = 800;

  doodle.style.setProperty('--bar-value', values);
  doodle.style.setProperty('--bar-labels', labels);
  doodle.style.setProperty('--bar-max-value', maxValue);
</script>

---

所以如果能引入一个新函数来读取 CSS 变量，就不需要额外的 JS 方法，直接使用标准的 Element.style.setProperty()

[Yuan Chuan]

当然像 d3.js 那样为每个 cell 绑定数据也很不错，也可以考虑添加上去

[Yuan Chuan]

抱歉一直没有添加 @get 函数，原因是监听变量的改变难度比较大。另外现在 @grid 支持第三个维度，所以之前绑定数据到二维 grid 变得不太可行了