Shulou(Shulou.com)06/01 Report--

This article mainly introduces DataGear how to customize the data visualization chart, the article is very detailed, has a certain reference value, interested friends must read it!

DataGear has built-in many commonly used charts (line chart, bar chart, pie chart, scatter chart, radar chart, map, etc.), which can meet most of the data visualization needs. When the built-in charts can not be met, you can customize charts or plug-ins to achieve specific business data visualization needs.

Custom charts are simple and easy to implement, as long as you add dg-chart-renderer attributes (chart renderer) to the custom chart elements for the chart type in Kanban, and implement its logic; the custom chart plug-in is slightly more complex, requiring the preparation of a separate plug-in package and uploading it to the system, then reusing it throughout the system.

This article mainly explains the implementation of custom chart.

Before you start customizing, it is important to understand that the system automatically introduces JS libraries such as Jquery (window.$) and ECharts (window.echarts) for charts and Kanban display pages (see the section on built-in Kanban resources on the official website), and you can use them directly in custom charts and plug-ins.

Next, take a line chart as an example to show how to implement it through a custom chart.

Suppose you have the following monthly sales CSV dataset:

Name:

Monthly sales

Data:

Month sales1 1 / 12 / 4 / 9 / 20 / 5 / 15 / 18

Attribute (obtained by the system automatically after the preview, and the display name is selected by the user):

Name type display name month string month sales numerical sales

Suppose that with regard to the above dataset, the chart type is a custom chart:

Name: monthly sales chart type: custom dataset: monthly sales

A custom chart requires the implementation code of the chart renderer to be written in Kanban, so create a new Kanban here and add the above chart as follows:

. / / Custom Chart Renderer var myChartRenderer= {}

What you need to do is to implement the myChartRenderer chart renderer logic, which should implement at least the following two functions (asynchronous rendering and event handling need to implement more functions. For more information, please see the official website document chart renderer section):

{/ / initially rendered chart / / chart chart object render: function (chart) {...}, / / update chart data / / chart chart object / / results dataset result object array update: function (chart, results) {...}}

Before implementing the above two functions, we need to understand the structure of the two parameters chart and results.

Chart represents a chart object, which encapsulates the basic information to render the chart and its associated dataset information (specified by adding the dg-chart-widget attribute to the chart element). In this case, its basic structure is as follows:

{name: monthly sales Chart, / / dataset information associated with the chart In this example, there is only one chartDataSets: [{dataSet: {name: "monthly sales", properties: [{name: "month", type: "STRING", label: "month"}, {name: "sales", type: "NUMBER", label: "sales"]}}] / / the div chart element ID where the chart is located If it is not defined, one will be randomly generated and automatically set to the id attribute elementId: "..."} of the div chart element.

In addition to the above basic structure, the chart object also defines a number of auxiliary API for supporting chart rendering, data processing, event handling and so on (see the Chart object section of the official website documentation for details). Here are some basic API:

/ / get the div chart element DOM object chart.element () / / get the Jquery object chart.elementJquery () of the div chart element / / initialize the chart to an ECharts chart and return the ECharts instance object chart.echartsInit (options) / / get the chart's ECharts instance object chart.echartsInstance () / / set the chart's ECharts option chart.echartsOptions (options) / / convert the chart raw dataset data into name / value structure data chart.resultNameValueObjects (result, nameProperty, valueProperty)

Results represents the result data of the associated dataset of the chart, one-to-one corresponding to the chartDataSets array elements of the above chart object. In this case, its structure is as follows:

[{data: [{month: "January", sales: 11}, {month: "February", sales: 41},...]}]

After you understand the parameter structures of chart and results, you can use them to implement the render and update functions of myChartRenderer:

/ / Custom chart renderer var myChartRenderer= {render: function (chart) {var chartDataSet = chart.chartDataSets [0]; var dataSet = chartDataSet.dataSet; / / Chart title: "monthly sales chart" var title = chart.nameNonNull (); / / Chart X axis label: month var xAxisName = chart.dataSetPropertyLabel (dataSet.properties [0]) / / Chart Y axis label: "sales" var yAxisName = chart.dataSetPropertyLabel (dataSet.properties [1]); / / illustration name, series name: "monthly sales" var seriesName = chart.chartDataSetName (chartDataSet) Var options = {title: {text: title}, legend: {data: [seriesName]}, tooltip: {trigger: "axis"}, xAxis: {name: xAxisName, type: "category", data: []}, yAxis: {name: yAxisName, type: "value"}, series: [{name: seriesName Type: "line", data: []}} / / initialize ECharts chart.echartsInit (options);}, update: function (chart, results) {var dataSet = chart.chartDataSets [0] .dataSet; var result = results [0]; / / X axis scale: ["January", "February",...] Var xAxisData = chart.resultRowArrays (result, dataSet.properties [0]); / / broken line data: [{name: "January", value: 11}, {name: "February", value: 41},...] Var seriesData = chart.resultNameValueObjects (result, dataSet.properties [0], dataSet.properties [1]); var options = {xAxis: {data: xAxisData}, series: [{data: seriesData}]}; / / Update chart data chart.echartsOptions (options);}}

Custom chart completed! The effect is shown in the following figure:

The above is all the content of the article "how to customize the data Visualization Chart by DataGear". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.