image-charts - 锐化 [image-charts] 中的图表

Question

我们目前正在使用图像图表渲染图表，但是由于我们在 html 模板中使用图表并且图像图表的图像质量与其他文本/图像不同，因此我们遇到了问题。

目前我们正在将图表渲染为 png。

标签： image-charts

Answer 1

Image-Charts创始人在这里 :)

目前有两种解决方案：

（免费）要求更大的图像，然后让浏览器缩小它

免费用户最多可以生成999x999px. 所以假设你想要一个最终的图表450x300px。

首先让我们要求一个条形图，其大小为chs=900x600（因此为 900x600 像素）和标签字体大小为16px( chxs=1N**K,333333,16%7C0,333333,16)。

https://image-charts.com/chart?cht=bvg&chd=t:10,15,25,30,40,80&chs=900x600&chxt=x,y&chxl=0:%7CMarch%20'18%7CApril%20'18%7CMay%20'18%7CJune%20'18%7CJuly%20'18%7CAugust%20'18%7C&chdl=Visitors%20(in%20thousands)&chf=b0,lg,90,05B142,1,0CE858,0.2&chtt=Visitors%20report&chma=0,0,10,10&chl=%7C%7C%7C%7C+33%25%20!%7Cx2&chxs=1N**K,333333,16%7C0,333333,16

现在，将它嵌入到<img/>一个宽度450px和高度为的图像标签中，300px如下所示：

<img style="height:300px;width:450px;" src="https://image-charts.com/chart?cht=bvg&chd=t:10,15,25,30,40,80&chs=900x600&chxt=x,y&chxl=0:%7CMarch%20'18%7CApril%20'18%7CMay%20'18%7CJune%20'18%7CJuly%20'18%7CAugust%20'18%7C&chdl=Visitors%20(in%20thousands)&chf=b0,lg,90,05B142,1,0CE858,0.2&chtt=Visitors%20report&chma=0,0,10,10&chl=%7C%7C%7C%7C+33%25%20!%7Cx2&chxs=1N**K,333333,16%7C0,333333,16"/>

浏览器缩小比例，同时在高分辨率屏幕上创建锐化图片。

（企业&企业+客户）使用视网膜显示功能

杠杆icretina=1和srcset更多信息在这里。

https://image-charts.com/chart?chd=t%3A10%2C15%2C25%2C30%2C40%2C80&chdl=Visitors%20%28in%20thousands%29&chf=b0%2Clg%2C90%2C05B142%2C1%2C0CE858%2C0.2&chl=%7C%7C%7C%7C%2033%25%20%21%7Cx2&chma=0%2C0%2C10%2C10&chs=900x600&cht=bvg&chtt=Visitors%20report&chxl=0%3A%7CMarch%20%2718%7CApril%20%2718%7CMay%20%2718%7CJune%20%2718%7CJuly%20%2718%7CAugust%20%2718%7C&chxs=1N%2A%2AK%2C333333%2C16%7C0%2C333333%2C16&chxt=x%2Cy&icac=documentation&icretina=1&ichm=5f593c1323ba799a5e3902855a25cb4d44643f84d65b8e677e7fb64c3b2cfcac