Introduction to the

Highchart is a pure JS chart library that supports normal charts, maps, stock charts, etc. It belongs to configuration charts, similar to Echart.

Method of use

HTML page introduction:

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
Copy the code

NPM install

npm install highcharts --save

import Highcharts from 'highcharts/highstock'
Copy the code

The chart of

Common, such as:

attribute role other
Title The title
Axis coordinate
Series Data column It’s also a data source
Tooltip Data prompt box When the mouse hovers over a point, the data of the point is displayed in the form of a box
Legend legend Click on the label to show or hide the data column.
Credits Copyright tag The default is the official address of Highcharts
Exporting Export function Need to introduce exporting.js
PlotLines line To add a line on the chart, such as average line, maximum line, etc
PlotBand Marked area

Configuration page

Basic configuration

$('#container'). Highcharts ({title:{// table title text:'Primary School Enrolment Table'
		},
        chart: {
          type: 'area', // chart type}, tooltip: {// prompt pointFormat:'< span style = "color: {series. Color}" > {series. The name} < / span > : {point. Y:. 0 f} m < br / >',}, yAxis: {//y side base labels: {format:'{value} people'},}, series: [{// data name:'test'Data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}});Copy the code

The display is as follows:

The detailed configuration document is highcharts.com.cn/

Exporting Excel files

Jx-xlsx is used here, and you can use its methods once you install it and download it. Docs.sheetjs.com/

Basic usage

Writing:

methods role
aoa_to_sheet Convert an array of JS arrays ([[…],[…],[…]]) to a worksheet
json_to_sheet Convert an array of JSON objects into a worksheet
table_to_sheet Convert DOM TABLE elements into worksheets
sheet_add_aoa Adds the JS data array to an existing worksheet
sheet_add_json Add an array of JSON objects to an existing worksheet

Read:

methods attribute
sheet_to_json Convert the worksheet object to an array of JSON objects
sheet_to_csv Convert worksheets to CSV
sheet_to_txt Generates text in UTF16 format
sheet_to_html Generate HTML output

Cell and cell address operations:

methods role
format_cell Generate text values for cells (in numeric format)
encode_row / decode_row Converts between index row 0 and index row 1
encode_col / decode_col Converts between index 0 column and column name
encode_cell / decode_cell Convert the cell address
encode_range / decode_range Transform the range of cells

The drawing object

attribute role
sheet[address] Returns a cell object at the specified address
sheet[‘!ref’] The a-1 based scope represents the drawing scope
sheet[‘!margins’] An object that represents a page margin

Worksheet object

attribute role
ws[‘!cols’] An array of column property objects
ws[‘!rows’] Array of row property objects
ws[‘!merges’] Array of range objects that correspond to merged cells in the worksheet
ws[‘!protect’] Writing paper protects objects with properties

When exporting the file, the target data structure is

Source data structure when using the AOA_to_sheet method

const data = [
['id'.'name', age], ['1'.'Ming'.'10'],
['2'.'little red'.'14'], / /...] XLSX utils. Aoa_to_sheet (data)Copy the code

When using the jSON_to_sheet method, the source data structure:

const data =  [{
  id: '1',
  name: 'Ming',
  age: '10'}, {//... }] XLSX.utils.json_to_sheet(data)Copy the code

Highchart export Excel

Get the chart instance and call getCSV to get the data

var chart = new Highcharts.Chart({
	chart: {
		renderTo: 'container'
	},
	title: {
		text: 'Export Excel'
	},
	xAxis: {
		categories: ['一月'.'二月'.'march'.'in April'.'may'.'June'.'July'.'August'.'September'.'October'.November.December]
	},
	series: [{
		name: 'Test data', data: }]}) const chartData = chart.getcsv ()Copy the code

String with ‘\n’ split

After processing, the source data format required by AOA_TO_sheet is obtained

chartData.split('\n').map((item) => item.split(', '))  
Copy the code

Export method: such as JS array

const worksheet = XLSX.utils.aoa_to_sheet(data); Const newWorkbook = xlsx.utils.book_new (); // Convert the js array to a worksheet const newWorkbook = xlsx.utils.book_new (); // create a work object xlsx.utils.book_append_sheet (newWorkbook, worksheet,'Table name'); // Add worksheet xlsx. writeFile(newWorkbook, './ file name.xlsx); // Write a file and export itCopy the code

other

Object, according to the source data structure


const data = dataSouce.map(item => ({
    'id': item.id,
    'name': item.name,
    'age': item.age
  }));
const worksheet = XLSX.utils.json_to_sheet(data)

Copy the code