使用模板创建条形图Web组件

市场上有许多非常强大的图表库。有些商业。一些是免费的。你应该使用它们。但每隔一段时间,你就需要自己卷一卷。不要担心!借助SVG和来自钢网,你可以创建一个图表作为一个web组件供所有人使用。

数据阵列

大多数图表库都非常复杂。其中大部分都与抽象数据的表示方式有关。正是这些抽象使该库在许多情况下如此有用。然而,在本例中,我们并不是为所有的案例构建一个库,而是构建一个条形图来满足我们的特定案例。这可以极大地简化我们的工作。

根据维基百科,在条形图中,“图表的一个轴显示被比较的特定类别,另一个轴表示测量值。”在我看来,柱状图是一组数字。让我们从一些SVG和数字数组开始。

从@stencil/core中导入{Component, h, Prop};@Component({tag: 'ionx-chart', styleUrl: ' Chart .css', shadow: true})导出类Chart {render() {return ();} //图表中使用的值@Prop()数据:Array = [];}

每一个数量数组会沿着其中一个轴占据相同的空间。对于本例,我们将使用水平轴。横轴是320像素。如果我们得到10(10)个值数组,每条将占32像素。

最大的比率

信不信由你,我们就快到了。在呈现图表之前,我们需要知道的最后一条信息是数组.我们需要知道最大值因为我们要建立一个比率。我们要的是最大值数组为了等于垂直轴上的可用像素数。

私人比例:number = 1;

例如,如果数组中的值都大于240垂直轴上的像素,我们如何渲染条呢?的最大值数组1000年.我们的可用空间240除以的最大值1000年给我们一个比率240:1,0000.24.现在我们可以乘任何一个数量数组通过0.24,我们就会知道杆的高度而且这条条将适合我们的可视区域。

不相信我吗?让我们说下一个数量数组500.的价值500是一半的1000年.如果1000年等于所有垂直像素(240),然后500应该等于垂直像素的一半,还是120.准备好了吗?500 * 0.24 = 120

将呈现

在我们渲染数据我们需要一个地方来计算最大值和对应的比值。从模板的角度来看,最好的地方是在componentWillRender (),在每次渲染之前调用。

componentWillRender() {let maximum: number = 0;//求(let d: number = 0;d < this.data.length;d++) maximum =数学。马克斯(最大,这。数据[d]);//四舍五入到最接近的整数//分配比例最大。=数学。装天花板(最大);这一点。比率= 240 / maximum;}

很快就会很清楚,我们的图表(实际上任何图表)的限制因素是要渲染的数据量。不是因为渲染需要很长时间,而是因为计算数据的边缘需要很长时间。这就是为什么当你看到的只是一些彩色斑点时,超级计算机必须被用于气象地图。

然而,条形图并不是天气图。我们可以在浏览器中完成所有这些处理(以及更多的处理)。

渲染

现在我们有了所有相关的信息,我们需要把这些条形图显示在屏幕上!SVG中的条是矩形.的矩形需要知道它的位置(xy)及其尺寸(宽度高度).

高度我们已经知道将是这个迭代中的值(number)数据乘以之前我们计算。我们还讨论了如何宽度每条的长度是横轴上的空间(320的值个数数据.我们不知道会有多少值,所以我们内联计算。

x位置几乎是一样的,除了我们乘以宽度指数的迭代。如果宽度50像素,第一次迭代(指数= = = 0)会导致x是0(0).是的,请!下一个迭代(指数= = = 1)乘以a宽度50的地方x50.完全正确!

渲染(){返回( {this.data. data.)map((值:number,索引:number) =>  )} );}

svg中唯一有点棘手的是y的位置。当我们想到Web时,我们通常认为屏幕的左上角是(0,0)在坐标系上。然而,在SVG的情况下(0,0)在左下角。

这意味着如果我们放置y240然后说高度矩形One hundred.,由此产生的矩形实际上是从SVG视口绘制的(从240340).为了抵消这个,我们减去计算的高度使用我们的,从高度SVG的可视区域。

为了看到每条填满是一个随机生成的CSS吗rgb ()价值。这就引出了一个问题:“也许这个条应该被抽象到一个包含填充颜色的类中?”是的!恭喜你回到了原点——这正是图表库所做的;抽象所有的事物。你能走多远取决于你自己。

✋但是……

有两个例子包括在运行中示范和GitHub存储库.一个例子是我们刚刚创建的图表。另一个例子是一个图表,其中包含您可能在图表中发现的许多典型考虑因素。

  • 图表标题
  • 轴标签
  • 值标签
  • 动态填充
  • 圆角
  • 灵活的分级
  • CSS属性

代码没有抽象到库的程度,但它应该为您提供一个起点,以便为您自己的图表组件考虑更复杂的呈现情况。

下一步:用Stencil构建更多的web组件

所有这些选项无疑增加了数学和渲染的复杂性,但它们都遵循相同的模式。首先,弄清楚数据的结构。其次,计算出数据的边缘。第三,考虑你可能需要计算布局的任何信息。最后,遍历数据以呈现输出。

现在,下次你需要一个自定义图表,你将知道从哪里开始-与Stencil和web组件。

这里是Stencil v2.9

注册爱奥尼亚通讯以获得最新的新闻betway东盟体育app和更新!

Baidu