You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by GitBox <gi...@apache.org> on 2020/07/31 07:13:56 UTC
[GitHub] [incubator-echarts-handbook] plainheart commented on a change in pull request #3: translation
plainheart commented on a change in pull request #3:
URL: https://github.com/apache/incubator-echarts-handbook/pull/3#discussion_r463432290
##########
File path: contents/en/application/chart-types/bar/basic-bar.md
##########
@@ -0,0 +1,165 @@
+# Basic Bar Chart
+
+Bar Chart, is a chart that presents the comparisons among discrete data. The length of the bars is proportional related to the categorical data.
Review comment:
Maybe we should use the adverb `proportionally` instead of the adjective `proportional`?
##########
File path: contents/en/application/chart-types/line/basic-line.md
##########
@@ -0,0 +1,131 @@
+# Basic Line Chart
+
+柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。
Review comment:
These Chinese characters should not exist in English documentation.
##########
File path: contents/en/application/chart-types/bar/stacked-bar.md
##########
@@ -0,0 +1,30 @@
+# Stacked Bar Chart
+
+Sometimes, we hope to not only figure series separately but also the trend of the sum. It's a good choice to implement it by using the stacked bar chart. As the name suggests, in the stacked bar chart, data in the same category will be stacked up in one column. The overall height of the bar explained the change of total.
+
+There is a simple way to implement a stacked bar chart by the ECharts. You need to set the same string type value for a group of series in `stack`. The series with the same `stack` value will be in the same category.
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 43, 49],
+ type: 'bar',
+ stack: 'x'
+ }, {
+ data: [5, 4, 3, 5, 10],
+ type: 'bar',
+ stack: 'x'
+ }]
+};
+```
+
+In this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two.
+
+>The value of `stack` explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading.
+>
+>For instance, here is statics with 4 series that is about the amount of male and female. "adult male" and "boy" need to be stacked while "adult female" and "girl" need to be stacked. In this case, the suggestive value of `stack` is `'male'` and `'female'`. Although meaningless string like `'a'` and `'b'` can achieve the same effect but has worse code readability.
Review comment:
> For instance, here is statics with 4 series that is about the amount of male and female.
Is the word `statics` an abbreviation or a typo? Do you mean `statistic`?
##########
File path: contents/en/application/chart-types/bar/basic-bar.md
##########
@@ -0,0 +1,165 @@
+# Basic Bar Chart
+
+Bar Chart, is a chart that presents the comparisons among discrete data. The length of the bars is proportional related to the categorical data.
+
+To set the bar chart, you need to set the `name` of `series` as `'bar'`.
+
+[[CI Handbook]](${optionPath}series-bar)
+
+## Simple Example
+
+Let's begin with a basic bar chart:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
+
+In this case, the x-axis is under the category type. Therefore, you should define some corresponding values for `'xAxis'`. Meanwhile, the data type of the y-axis is numerical. The range of the y-axis will be generated automatically by the `data` in `'series'`.
+
+
+## Multi-series Bar Chart
+
+You may use a series to represent a group of related data. To show multiple series in the same chart, you need to add one more array under the `series`.
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }, {
+ type: 'bar',
+ data: [26, 24, 18, 22, 23, 20, 27]
+ }]
+};
+```
+
+
+## Customized Bar Chart
+
+### Styles
+
+It's good idea to install the style of Bar Chart by using ['series.itemStyle'](${optionPath}series-bar.itemStyle). Description of the SCI:
Review comment:
Add `a` before `good idea`
##########
File path: contents/en/best-practice/chart-specificatio/bar/grouped-bar.md
##########
@@ -0,0 +1,20 @@
+# Grouped Bar Chart
+
+A grouped bar chart is also called the gathered bar chart. When more than two data series placed one by one on the same axis, the chart will be grouped bar chart. It is equivalent to a basic bar chart combined with two or more charts.
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xr13FAH54f&v=1">
+</iframe>
+
+A grouped bar chart usually used to compare several groups of data that included the same kind of variables. Same as the bar chart, the length of the bars is proportional related to the categorical data. Every series have an individual color or different saturation of the same color system so that the user can distinguish and compare each set of data.
+
+<iframe max-width="830" width="100%" height="400"
+ src="https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW&v=3">
+</iframe>
+
+
+## Suggestion Using Grouped Bar Chart
Review comment:
Maybe `Suggestion for Using Grouped Bar Chart` is better.
##########
File path: contents/en/best-practice/chart-specificatio/bar/bi-directional-bar.md
##########
@@ -0,0 +1,29 @@
+
+Bi-directional bar charts are mostly used to show values that included in two opposite meaning categories. One axis shows the name of categories being compared, while the other axis represents the scale value. As an example, Using a bi-directional bar chart to analyze the personal income (positive number) and outcome (negative number) in a week, you can easily find the value and fluctuation of income and outcome in a single series.
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f">
+</iframe>
+
+The bi-directional bar can be classified into the vertical chart (above) and horizontal chart(below, also called positive negative bar chart). For example, you can use a positive negative bar chart if there are positive and negative comments in a customer satisfaction survey data analysis. All data align in the middle, the positive comments attribute on the right side while the negative comments on the left side.
+
+<iframe max-width="830" width="100%" height="400"
+ src="https://gallery.echartsjs.com/view-lite.html?cid=xHJ1un374z">
+</iframe>
+
+
+## Suggestion Using Bi-directional Bar Chart
Review comment:
Maybe `Suggestion for Using Bi-directional Bar Chart` is better.
##########
File path: contents/en/best-practice/chart-specificatio/bar/stacked-bar.md
##########
@@ -0,0 +1,21 @@
+# Stacked Bar Chart
+
+The stacked bar chart is an extension of the bar chart. The difference is that the data in the bar chart is placed parallel while stacked together in the stacked bar chart. You can use a stacked bar chart to reflect the total amount of each category, as well as the proportional relationship of each data compared with the category. Therefore, it is very suitable for dealing with the relationship between part and whole.
+
+Compared with the pie chart, a stacked bar chart can display several groups of "part and whole" relationship. For instance, you can use a pie or bar chart to display the statistics of the number of people in each project in a physical education course. You can use a stacked bar chart when you want to distinguish boys and girls in each project. As shown in the chart, it included the info of the "part and whole" relationship of each group.
+
+<iframe max-width="830" width="100%" height="400"
+ src="https://gallery.echartsjs.com/view-lite.html?cid=xBk7oUNwEz">
+</iframe>
+
+## Suggestion Using Stacked Bar Chart
Review comment:
Maybe `Suggestion for Using Stacked Bar Chart` is better.
##########
File path: contents/en/best-practice/chart-specificatio/bar/basic-bar.md
##########
@@ -0,0 +1,41 @@
+# Basic Bar Chart
+
+Bar Chart is a chart that presents the comparisons among discrete data. The length of the bars is proportional related to the categorical data.
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f">
+</iframe>
+
+While the label of the series is long, or there are more than 10 categories in one chart, a horizontal column chart can not show all labels, or labels can only be shown tilted. It affects the appliance. Therefore, we use a vertical bar chart to get a better display effect.
+
+<iframe max-width="830" width="100%" height="400"
+src="https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz">
+</iframe>
+
+## Suggestions Using Bar Chart
Review comment:
Maybe `Suggestion for Using Bar Chart` is better.
##########
File path: contents/en/application/chart-types/bar/stacked-bar.md
##########
@@ -0,0 +1,30 @@
+# Stacked Bar Chart
+
+Sometimes, we hope to not only figure series separately but also the trend of the sum. It's a good choice to implement it by using the stacked bar chart. As the name suggests, in the stacked bar chart, data in the same category will be stacked up in one column. The overall height of the bar explained the change of total.
+
+There is a simple way to implement a stacked bar chart by the ECharts. You need to set the same string type value for a group of series in `stack`. The series with the same `stack` value will be in the same category.
Review comment:
In `by the ECharts`, `the` is not needed.
##########
File path: contents/en/application/chart-types/line/basic-line.md
##########
@@ -0,0 +1,131 @@
+# Basic Line Chart
+
+柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。
+
+## Simple Example
+
+We can use the following code to build a line chart which has x-axis as `category`, y-axis as `value`:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ type: 'category',
+ data: ['A', 'B', 'C']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [120, 200, 150],
+ type: 'line'
+ }]
+};
+```
+
+In this case, we set the type of axis to `category` and `value` under `xAxis` and `yAxis`. We also clarified the content on the x-axis through `data`. In `series`, we set the type to `line`, and specify the values of three points through `data`. In this way, we got a simple line chart.
+
+>The `type` here can be omitted because the defaults of the axis are `value` while `xAxis` has specified the category's `data`. In this case, `ECharts` can recognize that this is a category axis.
+
+
+## Line Chart in Cartesian Coordinate System
+
+How to implement if we want the line chart to be continuous? The answer is simple, as long as every value in `data` of the `series` is represented by an array containing two elements.
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {},
+ yAxis: {},
+ series: [{
+ data: [[20, 120], [50, 200], [40, 50]],
+ type: 'line'
+ }]
+};
+```
+
+
+## Customized Line Chart
+
+### Line Style
+
+Line style can be changed by `lineStyle` setting. You can specify color, line width, polyline type and opacity etc.. For details, please see the handbook [`series.lineStyle`](${optionPath}series-line.lineStyle) to figure out.
+
+Here is an example of setting color, line width, and type.
Review comment:
The comma before `and type` should be removed.
##########
File path: contents/en/application/chart-types/bar/basic-bar.md
##########
@@ -0,0 +1,165 @@
+# Basic Bar Chart
+
+Bar Chart, is a chart that presents the comparisons among discrete data. The length of the bars is proportional related to the categorical data.
+
+To set the bar chart, you need to set the `name` of `series` as `'bar'`.
+
+[[CI Handbook]](${optionPath}series-bar)
+
+## Simple Example
+
+Let's begin with a basic bar chart:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }]
+};
+```
+
+In this case, the x-axis is under the category type. Therefore, you should define some corresponding values for `'xAxis'`. Meanwhile, the data type of the y-axis is numerical. The range of the y-axis will be generated automatically by the `data` in `'series'`.
+
+
+## Multi-series Bar Chart
+
+You may use a series to represent a group of related data. To show multiple series in the same chart, you need to add one more array under the `series`.
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 27, 28, 25]
+ }, {
+ type: 'bar',
+ data: [26, 24, 18, 22, 23, 20, 27]
+ }]
+};
+```
+
+
+## Customized Bar Chart
+
+### Styles
+
+It's good idea to install the style of Bar Chart by using ['series.itemStyle'](${optionPath}series-bar.itemStyle). Description of the SCI:
+
+- Color of column(`'color'`);
+- Outline color(`'borderColor'`), width(`'borderWidth'`), type(`'borderType'`) of column;
+- Border radius of column(`'barBorderRadius'`);
+- Transparency(`'opacity'`);
+- Shadow type(`'shadowBlur'`, `'shadowColor'`, `'shadowOffsetX'`, `'shadowOffsetY'`)
+
+Here is a example:
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 43, 49],
+ type: 'bar',
+ stack: 'x'
+ }, {
+ data: [5, 4, 3, 5, 10],
+ type: 'bar',
+ stack: 'x'
+ }]
+};
+```
+
+In this case, we defined the style of the bar chart by `'itemStyle'` of corresponding `series`. For complete configuration items and their usage, please check the configuration item manual: [`series.itemStyle`](${optionPath}series-bar.itemStyle)。
+
+### Width and Height of Column
+
+You can use [`barWidth`](${optionPath}#series-bar.barWidth) to change the width of the bar. For instance, the `'barWidth'` in the following case was set to `'20%'`. It indicates that width of each bar is 20% of the category width. As there are 5 data in every series, 20% `'barWidth'` means 4% for the entire x-axis.
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ data: [10, 22, 28, 43, 49],
+ type: 'bar',
+ stack: 'x'
+ }, {
+ data: [5, 4, 3, 5, 10],
+ type: 'bar',
+ stack: 'x'
+ }]
+};
+```
+
+In addition, [`barMaxWidth`](${optionPath}series-bar.barMaxWidth) has limited the maximum width of the bar. For some small value, you can declare a minimum height for the bar: [`barMinHeight`](${optionPath}series-bar.barMinHeight). When the corresponding height of data is smaller than the limit, ECharts will take 'barMinHeight' as the replaced height.
+
+### Column Spacing
+
+There are two kinds of column spacing. One is the spacing between different series under the same category: [`barWidth`](${optionPath}series-bar.barWidth). The other is the spacing between categories: [`barCategoryGap`](${optionPath}series-bar.barCategoryGap).
+
+<!-- embed -->
+```js
+option = {
+ xAxis: {
+ data: ['A', 'B', 'C', 'D', 'E']
+ },
+ yAxis: {},
+ series: [{
+ type: 'bar',
+ data: [23, 24, 18, 25, 18],
+ barGap: '20%',
+ barCategoryGap: '40%'
+ }, {
+ type: 'bar',
+ data: [12, 14, 9, 9, 11]
+ }]
+};
+```
+
+In this case, the `barGap` is `'20%'`. That means the distance between bars under the same category is 20% of the bar width. For instance, if we set the `barCategoryGap` to `'40%'`, the gap on each side of the bar will take 40% place in categories (compared with the width of the column).
+
+Usually, `barWidth` is not necessary to be clarified if `'barGap'` and `barCategoryGap` was set. If you need to make sure the bar is not too wide while the graph is large, try to us `barMaxWidth` to limit the maximum width of bars.
Review comment:
`try to us` -> `try to use`
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org