How can percentage data be displayed on a webpage and ensure the correct formatting of decimal places?

In website operation, we often need to display various data, among which percentage data is particularly common.Whether it is the degree of completion, growth rate, discount information, or other statistics, it is crucial to present percentages clearly and accurately, and ensure that the format of decimal places is unified, which is essential for improving user experience and website professionalism.AnQiCMS (AnQiCMS) provides a flexible template system, which can easily meet this requirement with its powerful filter function.

Data Storage: The Foundation is Key

In AnQi CMS, percentage data is usually not stored directly in the database in the form of a string like "75%", but in numerical form.This is mainly for the convenience of subsequent calculations and statistics. There are usually two storage methods:

1. Decimal Format:For example, 75% is stored as 0.75. This is the recommended way because it is closer to the mathematical definition and is more intuitive during multiplication, division, and other operations.
2. Integer form:For example, 75% is stored as 75. This method is also applicable in certain specific scenarios, but it is necessary to pay attention to whether it needs to be divided by 100 to restore the original proportion in the template.

In order to facilitate management and expansion, we usually willContent modelAdd custom fields to store this percentage data. For example, you can create a field named "Completion rate" (completion_rate）的Number typeField, and set it as a floating-point number, so you can store precise values like 0.75.

Percentage presentation in the template: The core is the filter.

The AnqiCMS template system adopts syntax similar to Django, where Filters are powerful tools for processing data formats. When displaying percentage data, we can usefloatformatorstringformatThese two filters are used to precisely control decimal places and add percentage signs.

Suppose we obtain a named from some content modelcompletion_ratewith a value of0.75.

Method one: usefloatformatPrecisely control decimal places

floatformatThe filter is mainly used for the formatting of floating-point numbers, it can easily retain the specified decimal places of the number.

Firstly, we need to multiply the percentage data stored as a decimal (such as 0.75) by 100 to make it an integer percentage (such as 75), and then control the decimal places.

{# 假设 item.completion_rate 的值为 0.75 #}
{% set raw_percentage = item.completion_rate * 100 %}
{# 将结果保留两位小数，并添加百分号 #}
{{ raw_percentage|floatformat:2 }}%
{# 输出结果为：75.00% #}

Herefloatformat:2Represents formatting a number to two decimal places. If you want to display no decimal, you can writefloatformat:0. If you need to dynamically control the number of decimal places, you can adjust according to the actual situationfloatformatthe following numbers.

To make the code more concise, you can also place the multiplication operation directly before the filter, the template engine of Anqi CMS supports this chained operation:

{# 假设 item.completion_rate 的值为 0.75 #}
{{ (item.completion_rate * 100)|floatformat:2 }}%
{# 输出结果为：75.00% #}

Method two: usestringformatPerform more flexible formatting

stringformatthe filter provides a language similar to Gofmt.Sprintf()The function can perform more refined string formatting on various types of data. It can directly specify decimal places and insert percentage signs in the format string.

Similarly, we first need to convert decimal percentage data to integer percentages.

{# 假设 item.completion_rate 的值为 0.75 #}
{% set raw_percentage = item.completion_rate * 100 %}
{# 使用stringformat格式化为两位小数的百分比 #}
{{ raw_percentage|stringformat:"%.2f%%" }}
{# 输出结果为：75.00% #}

Here%.2fRepresents a floating-point number formatted to two decimal places, and%%This indicates outputting a literal percentage. The advantage of this method is that it is more compact and can complete number formatting and the addition of the percentage sign in a single filter.

If your data is in integer form (for exampleitem.completion_ratestored as75), then you can directly apply the filter without multiplying by 100:

{# 假设 item.completion_rate 的值为 75 #}
{{ item.completion_rate|floatformat:2 }}%   {# 输出：75.00% #}
{{ item.completion_rate|stringformat:"%.2f%%" }} {# 输出：75.00% #}

The choice of which method to use depends on personal preference and specific needs.floatformatDirectly understandable,stringformatthen provides more powerful formatting capabilities.

Consideration of practical application scenarios.

In actual use, you may obtain percentage data from different places:

• Custom fields in the document:As mentioned above, fields defined in the content model are accessed througharchiveDetailorarchiveListtag to obtainitem.your_percentage_field.
• System settings or contact information:If there is percentage data in the background ofGlobal feature settingsorContact information settingsYou can use the percentage data insystemorcontactLabel acquisition, then apply the filter.
• Other label output:Any template label that outputs a numeric value can be formatted through the aforementioned filter.

It is important to maintain consistency in the percentage display format throughout the entire website.For example, if you decide to consistently retain two decimal places, then the same formatting rules should be used in all related template fragments, so that the user can experience a sense of continuity and professionalism while reading.

Summary

The AnQi CMS template system, in conjunction with built-in filters, provides a simple and efficient solution for displaying percentage data. Whether it is throughfloatformatprecise control of decimal places, or by utilizingstringformatImplement more flexible formatting that can help us present data to users in a clear and professional manner. Mastering these skills will make your website content more refined and easy to read.

Frequently Asked Questions (FAQ)

Q1: How to store percentage data in Anqi CMS so that it can be displayed correctly on the front end?

A1: It is recommended in Anqi CMS'sContent modelIn, create a new custom field for percentage data and selectNumber type. It is best to store it in decimal form for easy calculation and formattingdecimal formatstored, for example, 75% is stored as0.75. This can be directly multiplied by 100 in the template and then appliedfloatformatorstringformatfilter.

Q2: If my percentage data is already in integer form (for example, 75 represents 75%), how should I correctly format and add the percentage sign in the template?

A2: If the data is already stored in integer form (for example75), then there is no need to multiply by 100 in the template. You can apply this field directly.floatformatorstringformatThe filter to control decimal places and add a percentage sign. For example:{{ item.your_integer_field|floatformat:2 }}%Or{{ item.your_integer_field|stringformat:"%.2f%%" }}.

Q3: I need to display a progress bar on the page, with values in percentage, how should I do that?

A3: Displaying a progress bar usually involves front-end HTML and CSS (and sometimes JavaScript). Anqi CMS template is responsible for providingValueYou can format the percentage data into pure numbers (without the percentage sign) as described in the previous text, for example{{ (item.completion_rate * 100)|floatformat:0 }}Then use this number as an attribute of an HTML element, such asdata-progress="75"Or directly insert into the content of the element. Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for example Then, use CSS (for examplewidth: {{ (item.completion_rate * 100)|floatformat:0 }}%;To dynamically set the length of the progress bar. JavaScript can be used for more complex dynamic effects or animations.