How Multi-line stack map production

Run Dry statements have rich graphics show the effect, not only comes with a variety of statistical graphics, built-in third-party statistical graphics D3 also echarts charts. Recently a lot of customers want to achieve charts presented polyline stack, I use built-in graphics and echarts two ways to do a report in the sample polyline stack, and share.

Use a dry run chart that comes with multi polyline stacked charts

Create a report, add a data set, where I use a built-in data sets, field types, and field data set as shown below:

1png

The data format as shown below:

2png

Data sources run dry chart comes dataset field may be used, the value of the cell may also be used.

Use cell values ​​as the source of chart data

1. first sorting data in the dataset in a cell well, as shown below:

3png

A3 is grouped by date, the default cell with its longitudinal extension, so without expanding direction A3 of pipe;

Horizontal expansion is to take a different approach to marketing, which is the other name of the field except for the date field, so we began to expand from the second field name when writing extended expression;

B3 corresponding to different marketing, different situations in the week.

After the data collated in the cells we want to display the grid can add chart chart, here is the A4: C11 merged this area, right cell, select the chart, the chart attributes defined make the following settings:

1. The line graph type selection chart;

2. Set the Category A3 cell axis;

3. Set the value of the series and the series name.
4png

Through the above simple setup, we polyline charts has been done, let's preview the report to see the effect of the chart.

5png
Area background color chart, the horizontal longitudinal axis of the color in the appearance of the display to be modified in the following figure:
6png

A map is beautiful and it is directly related to color, the color is also modified in the Appearance tab in the settings:

7png

In this TAB characteristic pattern page may be adjusted line thickness

8png

Data show page only want to display the chart, we can hide for a list of data cells.

11_1png

The revised statistics showing the effect of the appearance of our preview again.

9png

Using the data set as the chart data field source

Add a chart below the one chart, the chart provided specific steps are as follows:

1. First line graph type selected from the chart;

2. Select the data set DS1;

3. The axis defines the classification, i.e. the horizontal axis determines the classification used was named Field date;

4. The other data field names set as a series of values ​​are set.

10png

Referring to beautify on a chart to modify the graphical nature of the report, you can see a chart created in a web end.

11png

If the data set collated the data shown in the chart, and do not need to display a list of data, we recommend using a dataset field of direct way mapping, such statements show the speed is relatively faster.

Achieve echarts polyline chart

1. Add a third-party chart in a cell, right-click the Add area chart, select a third-party chart.

12png

After opening the template, set the data legend, as well as charts show the left:

13png

After setting the expression, click on OK to save the report, the page can see the effect echarts made in the report.

14png

echarts style the page needs to be modified in that area that JS template, and modify specific properties, see the configuration items Manual echarts official website .

Published 48 original articles · won praise 13 · views 20000 +

Guess you like

Origin blog.csdn.net/zozoxxma/article/details/103693560