What is a data column
A data column is a set of data sets, such as a line, a set of cylinders, etc. The data of all points in the chart comes from the data column object. The basic structure of the data column is:
series : [{ name : '', data : []}]Tip: The data column configuration is an array, that is, the data configuration can contain multiple data columns.
The name in the data column represents the name of the data column and will be displayed in the data prompt box ( Tooltip ) and the legend ( Legend )
tags:
1. Data population in the data column:
Method 1: One-dimensional array
If there is a category property, use a one-dimensional array
data : [1, 4, 6, 9, 10]
Method 2: Two-dimensional array
If there is no category property, use a two-dimensional array
data : [ [5, 2], [6,3], [8,2] ]
Method 3: Collection
series:[{ data : [{ name : "point 1", color : "#00ff00", y : 0 }, { name : "Point 2", color : "#ff00ff", y : 5 }]}]2. Line Width:
Change the width of the line to 5px and default to 1px
series: [{ data: [216.4, 194.1, 95.6], lineWidth: 5}]3. DataLables:
plotOptions: { series: { dataLabels: { enabled: true, } } },4. Line style (Dash Style):
series: [{ data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6], dashStyle: 'longdash' }, { data: [2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5], dashStyle: 'shortdot' }]5.Zoom
series:[{ name:"a", data:[1,2,3], zoneAxis: 'x', //Specify which axis to act on: [{ value: 1.7, color:'#90ed7d'//These two properties can be put together but cannot be put together with dashStyle}, { dashStyle: 'dot' }] }]The above is all about this article. In Highcharts, the configuration of data columns is a very important configuration. At the same time, because the configurable properties are very correct, the configuration flexibility is very high, and everyone needs to experience and understand it by themselves.