Unity access to ChartAndGraph chart plug-in

illustrate

  Recently, some chart data needs to be displayed in the project. Because some 3D charts need to be used, the ChartAndGraph chart plug-in is selected. The chart data is read and parsed through the background interface Json, and then the chart plug-in API is called to display the data.

1. Realize the histogram

achieve effect

Implementation steps

1. Create a column chart preset as shown below, Tools-Charts-Bar-Canvas-Simple creates a column chart preset.
   
2. By setting relevant parameters in the Insperctor panel
   , find the script component in the column chart preset created in the above steps Canvas Bar Chart, and list the common settings
   column chart data settings : Categoriesthe content of the X axis (but not the X axis displayed under the chart) Data), Groups is the group name, click the corresponding three points behind to modify, remove and other operations.
   
   Y-axis data setting : Y-axis data is actually controlled by the script component on the column chart component Vertical Axis. The common settings are as follows:
   Format : Contains four data types: Number, Time, Date, and Date Time (only these four types can be selected here. If the value of the Y axis cannot satisfy the above four types, you may need to expand the plug-in to support dynamic specification)
   Text Prefix : The prefix of the Y axis value
   Text Suffix : The suffix of the Y axis text
   Main Divisions : It is the main division Setting, the Total below it is to set how many data there are on the Y axis
   .
   
3. Dynamically load data through scripts, and some other settings can also be obtained through code, you can try it.

  		canvasBarChart_LDSCL=this.GetComponent<CanvasBarChart>();

        //数据加载
        canvasBarChart_LDSCL.DataSource.StartBatch();
        canvasBarChart_LDSCL.DataSource.SetValue("1月", "all", 10);
        canvasBarChart_LDSCL.DataSource.SetValue("2月", "all", 10);
        canvasBarChart_LDSCL.DataSource.SetValue("3月", "all", 10);
        canvasBarChart_LDSCL.DataSource.SetValue("4月", "all", 10);
        canvasBarChart_LDSCL.DataSource.SetValue("5月", "all", 10);
        canvasBarChart_LDSCL.DataSource.SetValue("6月", "all", 10);
        canvasBarChart_LDSCL.DataSource.SetValue("7月", "all", 10);
        canvasBarChart_LDSCL.DataSource.EndBatch();

Second, realize the line chart

achieve effect

Implementation steps

1. Create a line chart preset as shown below, click Tools-Charts-Graph-Canvas-Simple to create a preset.
   

2. By setting relevant parameters in the Insperctor panel.
   Find the script component in the column chart preset created in the above steps Graph Chart, and list the commonly used
   Graph Chart script components:
   Fit Margin : You can set the display starting point range of the X/Y axis
   Categories : Line chart data, you can set
   the Horizontral View of each group of data : If Auto is checked, the start value and end value will be automatically adapted. If you don’t want to start from 0, uncheck it. Horizontal View OriginSet the start point through the settings, and set the amount of data through the Horizontal View Size.
   Vertical View : the same reason

   
   Verical Axis (Y axis setting)

   The basic use is the same as the column chart above, no longer listed
   
   3. Dynamically load data through scripts

        graphChart_MJXY=this.GetComponent<GraphChart>();

        graphChart_MJXY.DataSource.StartBatch();
        graphChart_MJXY.DataSource.ClearCategory("main");
        graphChart_MJXY.DataSource.AddPointToCategory("main", 1, 1);
        graphChart_MJXY.DataSource.AddPointToCategory("main", 2, 2);
        graphChart_MJXY.DataSource.AddPointToCategory("main", 4, 3);
        graphChart_MJXY.DataSource.AddPointToCategory("main", 5, 5);
        graphChart_MJXY.DataSource.EndBatch();

problems encountered

The problem I also encountered in the development is the content display of the X-axis, because the content of the X/Y-axis of this plug-in only includes four preset types of Number, Time, Date, and DateTime, and it is necessary to display discontinuous numbers during the development process. , such as 10, 11, 12, 1, 2, 3, I dynamically added an enumeration type, and then dynamically set the value of the X axis. There are also some methods that have been extended.