highcharts 怎样动态为series的name，data赋值

Posted 2023-03-22

数据列

数据列配置是 Highcharts 最复杂也是最灵活的配置，如果说 Highcharts 是灵活多变，细节可定制的话，那么数据列配置就是这个重要特性的核心

一、什么是数据列

数据列是一组数据集合，例如一条线，一组柱形等。图表中所有点的数据都来自数据列对象，数据列的基本构造是：

series : [    name : '',
data : []
]

提示：数据列配置是个数组，也就是数据配置可以包含多个数据列。

数据列中的 name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中。

二、数据列中的数据

在数据列的 data 属性中，我们可以定义图表的数据数组，通常有三种定义方式：

1、数值数组。在这种情况下，配置数组中的数值代表 Y 值，X 值则根据 X 轴的配置，要么自动计算，要么从 0 起自增，或者是根据 pointStart 及 pointInterval 自增；在分类轴中， X 值就是 categoies 配置，数值数组配置实例如下：

data : [1, 4, 6, 9, 10]

2、包含两个值的数组集合。在这种情况下，集合中数组的第一个值代表 X， 第二个值代表 Y；如果第一个值是字符串，则代表该点的名字，并且 X 值会如 1 中所说的情况决定。数组集合的实例：

data ： [ [5, 2], [6,3], [8,2] ]

在线试一试 （注意例子是 x y 轴对调的）

3、数据点对象集合。在这种情况下，集合中元素都是数据点对象，对象中可以配置数据见 plotOptions.series 或 plotOptions.图表类型 所列。配置实例：

data : [    name : "point 1",
color : "#00ff00",
y : 0,    name : "Point 2",
color : "#ff00ff",
y : 5]

参考技术A $(function () var chart = $('#container').highcharts( chart: marginBottom: 80 , xAxis: categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] , yAxis: labels: align: 'left', x: 0, y: -2 , series: [ 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] ] ).highcharts(); setTimeout(function() chart.series[0].setData([]); // 更新 series ,1000););

highChart数据动态更新

highChart官网上通过ajax加载数据的例子

上面是第一次生成图表的时候使用

 

我想动态更新，在已经生成的图表上动态更新

chartBS.series[0].setData(sugarListDataBefore);
chartBS.series[0].name=beforeTimeName;

chartBS.series[1].setData(sugarListDataAfter);
chartBS.series[1].name=afterTimeName;
chartBS.redraw(false);

但是只是改变了数据，没有改变name，也就是对线的标注解释

chartBS.series[0].update({
                    name: beforeTimeName,
                    data: sugarListDataBefore
                });
                chartBS.series[1].update({
                    name: afterTimeName,
                    data: sugarListDataAfter
                });

上面就成功了，效果是点击左上角select动态改变name和data

 

 update官网上不太推荐使用，理由

但是功能蛮强大的，看这里