指南

配置

图表是传递给KatuCharts.chart(container, options)的一个纯选项对象。每个属性都是可选的——默认值是合理的。这是每个顶级键的完整参考。

const chart = KatuCharts.chart(container, {
  chart:    { /* chart-level options */ },
  title:    { /* title options */ },
  subtitle: { /* subtitle options */ },
  xAxis:    { /* x-axis options */ },
  yAxis:    { /* y-axis options */ },
  series:   [ /* array of series */ ],
  tooltip:  { /* tooltip options */ },
  legend:   { /* legend options */ },
  plotOptions: { /* default series options */ },
  credits:  { /* credits options */ },
  exporting: { /* export options */ },
  colorAxis: { /* color mapping */ },
  responsive: { /* responsive rules */ },
  accessibility: { /* a11y options */ },
  drilldown: { /* drilldown options */ }
});

chart

整体容器、背景、尺寸和交互模式。

属性	类型	默认值	描述
`type`	string	'line'	不设置自己的series的默认series类型。
`width`	number \| null	null	显式宽度（像素）。null填充容器。
`height`	number \| string	400	高度，单位为像素，或相对于宽度的百分比（如 '56%'）。设为 null 可根据内容自动适配高度（在较矮的移动视口中有上限）。
`backgroundColor`	string	'#ffffff'	整个图表区域的背景色。
`borderColor / borderWidth / borderRadius`	string / number / number	— / 0 / 0	容器边框样式。
`spacing`	number[]	[10,10,15,10]	图表周围的间距[上,右,下,左]。
`margin`	number[] \| null	null	显式绘制区域边距；覆盖自动布局。
`animation`	boolean \| object	true	切换所有动画，或传递{ duration, easing }。
`zoomType`	string	—	拖动缩放轴：'x'、'y'或'xy'。
`panning`	boolean \| object	false	缩放时平移。对象：{ type }。
`panKey`	string	—	按住的键来平移：'shift'、'ctrl'、'alt'。
`inverted`	boolean	false	交换X和Y轴（水平图表）。
`polar`	boolean	false	以极坐标（雷达）渲染所有series。
`reflow`	boolean	true	容器调整大小时自动调整大小。
`palette`	string[]	—	覆盖主题颜色的自定义调色板。
`style`	object	—	应用于容器元素的CSS。
`events`	object	—	监听器：load、redraw、render、selection、click、drilldown、drillup。
`plotBackgroundColor / plotBorderColor / plotBorderWidth`	string / string / number	—	绘制区域（轴内）样式。
`scrollablePlotArea`	object	—	让绘图区在固定视口内滚动：{ minWidth, minHeight, scrollPositionX, scrollPositionY }。让较长的类别列表和较宽的时间序列在小屏幕上保持可用。

chart.zooming

属性	类型	默认值	描述
`type`	string	—	缩放方向：'x'、'y'、'xy'。
`key`	string	—	修饰键：'shift'、'ctrl'、'alt'。
`mouseWheel`	boolean \| object	—	鼠标滚轮缩放——默认关闭；用 true 或 { enabled, sensitivity, type } 开启。在可滚动图表上，滚轮会滚动绘图区而非缩放。
`pinchType`	string	—	触摸捏合方向：'x'、'y'、'xy'。
`resetButton`	object	—	缩放后显示的重置按钮；恢复坐标轴的原始范围。可用 { theme, position } 自定义。

title / subtitle

相同形状；副标题在标题正下方渲染。

属性	类型	默认值	描述
`text`	string	'Chart title'	内容；null/'隐藏。
`align`	string	'center'	'left' \| 'center' \| 'right'。
`margin`	number	15	标题下方的空间。
`style`	object	—	CSS文本样式。
`x / y`	number	0 / —	从对齐位置的像素偏移。
`floating`	boolean	false	浮在绘制区域上方。
`useHTML`	boolean	false	允许HTML而非SVG文本。

xAxis / yAxis

单个对象或用于多轴的数组。xAxis和yAxis共享这些属性（默认值在注明的地方有所不同）。

属性	类型	默认值	描述
`type`	string	'linear'	'linear' \| 'logarithmic' \| 'datetime' \| 'category'。
`title.text`	string	null	轴标题；null隐藏。
`min / max`	number	—	硬轴边界。
`softMin / softMax`	number	—	软边界——如果数据未达到则扩展到此。
`floor / ceiling`	number	—	绝对边界，padding无法跨越。
`categories`	string[]	—	分类标签；设置类型为'category'。
`tickInterval / tickAmount`	number	—	刻度间距（datetime时为ms）/精确刻度计数。
`tickLength / tickWidth / tickColor`	number / number / string	10 / 1 / '#ccd6eb'	刻度标记样式。
`gridLineWidth`	number	0 (x) / 1 (y)	每个刻度的网格线宽度。
`gridLineColor / gridLineDashStyle`	string / string	'#e6e6e6' / 'Solid'	网格线颜色和虚线。
`lineWidth / lineColor`	number / string	1 / '#ccd6eb'	轴线样式。
`offset`	number	0	从绘制区域边缘的偏移。
`opposite`	boolean	false	放在对侧。
`reversed / visible`	boolean	false / true	反向 / 隐藏轴。
`crosshair`	boolean \| object	false	指针十字准线；对象：{ color, width, dashStyle }。
`plotBands / plotLines`	object[]	—	彩色条带 / 参考线（下方）。
`startOnTick / endOnTick`	boolean	true	将轴极值对齐到刻度。
`minPadding / maxPadding`	number	0.01	作为范围分数的padding。
`allowDecimals`	boolean	true	允许小数刻度值。
`id / linkedTo`	string / number\|string	—	轴id / 将极值链接到另一轴。
`scrollbar`	boolean \| object	false	当绘图区滚动时用于平移的按轴滚动条 — { enabled, barBackgroundColor, trackBorderColor, … }。

轴标签

属性	类型	默认值	描述
`enabled`	boolean	true	显示/隐藏刻度标签。
`format`	string	'{value}'	模板，例如'${value}'。
`formatter`	function	—	回调；接收this.value。
`style`	object	—	CSS样式。
`rotation`	number	0	固定旋转（度）。
`autoRotation / autoRotationLimit`	number[] / number	[-45] / 80	当标签重叠时自动旋转角度。
`step`	number	—	显示每第n个标签。
`padding`	number	5	从轴线的padding。

plotBands & plotLines

yAxis: {
  plotBands: [
    { from: 0, to: 50, color: 'rgba(68,170,213,0.1)', label: { text: 'Low' } },
    { from: 100, to: 200, color: 'rgba(255,68,68,0.1)', label: { text: 'High' } }
  ],
  plotLines: [
    { value: 75, color: '#d62728', width: 2, dashStyle: 'Dash',
      label: { text: 'Target', align: 'right' }, zIndex: 5 }
  ]
}

series

配置的核心数组——每个数据集一个条目。首先是通用选项；然后是特定于类型的选项。

属性	类型	默认值	描述
`type`	string	'line'	Series类型；覆盖chart.type。
`name`	string	—	图例 / tooltip标签。
`data`	array	[]	点：数字、[x,y]或{ x, y, name }。
`id`	string	—	用于chart.get()和drilldown的id。
`color / colorIndex`	string / number	—	覆盖调色板颜色 / 调色板索引。
`visible / showInLegend`	boolean	true	初始可见性 / 图例存在。
`lineWidth / lineColor`	number / string	2 / —	线样式。
`dashStyle`	string	'Solid'	实线、破折号、点、短划线、长划线、破折号点……
`fillColor / fillOpacity`	string / number	— / 0.75	区域填充颜色和透明度。
`opacity`	number	1	整体series透明度。
`marker / dataLabels`	object	—	点标记 / 标签（下方）。
`stacking / stack`	string / string\|number	—	'normal' \| 'percent' / 堆栈组id。
`step`	string \| boolean	false	阶梯线：'left' \| 'center' \| 'right'。
`connectNulls`	boolean	false	跨越空值点绘制。
`threshold / negativeColor`	number / string	0 / —	区域基线 / 阈值下方的颜色。
`enableMouseTracking / allowPointSelect`	boolean	true / false	悬停和点击 / 点击选择点。
`clip`	boolean	true	将绘制裁剪到绘制区域。
`zones / zoneAxis`	object[] / string	— / 'y'	基于值的样式区域（下方）。
`animation / cursor`	boolean\|object / string	true / —	进入动画 / 悬停光标。
`xAxis / yAxis / zIndex`	number\|string	0 / 0 / —	绑定轴 / 堆栈顺序。
`pointStart / pointInterval`	number	0 / 1	平面数字数组的X起点和步长。
`keys`	string[]	—	将数组列映射到属性，例如['x','y','z']。
`drilldown`	string	—	点击时的钻取series的id。

柱状图 / 条形图

属性	类型	默认值	描述
`pointPadding / groupPadding`	number	0.1 / 0.2	组内 / 组间的padding。
`borderWidth / borderColor / borderRadius`	number / string / number	1 / '#fff' / 0	柱形边框样式。
`colorByPoint`	boolean	false	从调色板为每列着色。
`minPointLength`	number	0	微小值的最小条形高度。
`maxPointWidth / pointWidth`	number	—	最大 / 固定列宽（像素）。

饼图 / 环形图

属性	类型	默认值	描述
`innerSize`	number \| string	0	环形图的内直径，例如'50%'。
`size / center`	number\|string / array	— / ['50%','50%']	外直径 / 中心[x,y]。
`startAngle / endAngle`	number	0 / 360	饼图扫过（使用<360用于部分饼图）。
`slicedOffset`	number	10	切出点的像素偏移。

标记

属性	类型	默认值	描述
`enabled`	boolean \| null	null	null当点少时自动显示。
`symbol`	string	'circle'	circle、square、diamond、triangle、triangle-down或URL。
`radius`	number	4	标记半径。
`fillColor / lineColor / lineWidth`	string / string / number	— / — / 0	标记填充和边框。
`states.hover / states.select`	object	—	{ enabled, radius, fillColor, lineColor, lineWidth }。

数据标签

属性	类型	默认值	描述
`enabled`	boolean	false	在每个点上启用标签。
`format / formatter`	string / function	'{point.y}' / —	模板 / 回调（this.point, this.series）。
`style / color`	object / string	—	文本样式。
`backgroundColor / borderColor / borderRadius / padding`	string / string / number / number	— / — / 0 / 5	标签框样式。
`align / verticalAlign`	string	'center' / —	在点内的对齐。
`x / y / rotation`	number	0	偏移和旋转。
`inside / allowOverlap`	boolean	false	放在条形内 / 允许重叠。
`distance / connectorWidth / connectorColor`	number / number / string	— / 1 / —	饼图标签距离和连接线。

Series状态

plotOptions: {
  series: {
    states: {
      hover:    { lineWidthPlus: 2, halo: { size: 10, opacity: 0.25 } },
      select:   { color: '#d62728', borderColor: '#000', borderWidth: 2 },
      inactive: { opacity: 0.2, animation: { duration: 50 } }
    }
  }
}

区域

series: [{
  data: [29, 71, 106, 82, 44, 13],
  zoneAxis: 'y',
  zones: [
    { value: 50,  color: '#2ca02c' },   // below 50
    { value: 100, color: '#ff7f0e' },   // 50–100
    { color: '#d62728' }                // above 100
  ]
}]

常用选项（已渲染）

这些选项适用于所有系列类型。每个示例都是看到该选项效果所需的最小配置。

color · colorByPoint

用 colorByPoint 让每个点取自调色板，或为单个点设置显式 color。

KatuCharts.chart('container', {
  chart: { type: 'column' },
  series: [{
    colorByPoint: true,
    data: [
      { name: 'Apples', y: 5 },
      { name: 'Pears', y: 3, color: '#8C2810' },
      { name: 'Plums', y: 7 }
    ]
  }]
});

visible · showInLegend

用 visible: false 在加载时隐藏某个系列，或用 showInLegend: false 将其排除在图例之外。

KatuCharts.chart('container', {
  chart: { type: 'line' },
  series: [
    { name: 'Revenue',  data: [4, 6, 5, 8] },
    { name: 'Forecast', data: [3, 5, 6, 7], visible: false },
    { name: 'Internal', data: [2, 2, 3, 3], showInLegend: false }
  ]
});

marker

开启数据点标记，并选择符号与半径。

KatuCharts.chart('container', {
  chart: { type: 'spline' },
  series: [{
    data: [3, 5, 4, 7, 6],
    marker: { enabled: true, symbol: 'diamond', radius: 6 }
  }]
});

dataLabels

在每个点上显示数值；format 支持 {point.y} 之类的占位符。

KatuCharts.chart('container', {
  chart: { type: 'column' },
  series: [{
    data: [29, 71, 40, 55],
    dataLabels: { enabled: true, format: '{point.y}%' }
  }]
});

dashStyle · lineWidth · lineColor

通过线宽、虚线样式和颜色区分各条线。

KatuCharts.chart('container', {
  chart: { type: 'line' },
  series: [
    { name: 'Thick',  data: [4, 5, 6, 7], lineWidth: 4 },
    { name: 'Dashed', data: [3, 4, 4, 5], dashStyle: 'Dash', lineColor: '#A85429' }
  ]
});

opacity · fillOpacity

控制系列与区域填充的透明度。

KatuCharts.chart('container', {
  chart: { type: 'area' },
  series: [{
    data: [5, 7, 6, 9, 8],
    fillOpacity: 0.3        // also: opacity, fillColor
  }]
});

zones

用 zones 按数值区间沿 y 轴为系列设置样式。

KatuCharts.chart('container', {
  chart: { type: 'line' },
  series: [{
    data: [-4, -1, 2, 5, 3, 7],
    zones: [
      { value: 0, color: '#B43417' },
      { color: '#33503A' }
    ]
  }]
});

threshold · negativeColor

设定基准线，并为其下方的部分使用不同颜色。

KatuCharts.chart('container', {
  chart: { type: 'column' },
  series: [{
    data: [3, -2, 5, -4, 2],
    threshold: 0,
    negativeColor: '#B43417'
  }]
});

animation

按系列调整入场动画时长。

KatuCharts.chart('container', {
  chart: { type: 'column' },
  series: [{
    data: [5, 8, 4, 9, 6],
    animation: { duration: 1200 }
  }]
});

events · cursor

用 cursor 让数据点可点击，并通过 events 处理函数响应。

KatuCharts.chart('container', {
  chart: { type: 'column' },
  series: [{
    cursor: 'pointer',
    data: [5, 8, 4],
    events: {
      click: (e) => console.log(e.point.category)
    }
  }]
});

step · connectNulls

绘制阶梯线，并连接由 null 点造成的间断。

KatuCharts.chart('container', {
  chart: { type: 'line' },
  series: [
    { name: 'Step', data: [3, 5, 5, 7, 6, 8], step: 'center' },
    { name: 'Gaps', data: [2, null, 4, 5, null, 6], connectNulls: true }
  ]
});

stacking · stack

用 stacking: 'normal' 将系列堆叠在一起。

KatuCharts.chart('container', {
  chart: { type: 'column' },
  series: [
    { name: 'Online', data: [3, 5, 4, 6], stacking: 'normal' },
    { name: 'Store',  data: [2, 3, 3, 4], stacking: 'normal' }
  ]
});

pointStart · pointInterval

为扁平数字数组生成 x 值。

KatuCharts.chart('container', {
  chart: { type: 'line' },
  series: [{
    pointStart: 2019,
    pointInterval: 1,
    data: [4, 6, 5, 8, 7, 9]
  }]
});

属性	类型	默认值	描述
`enabled`	boolean	true	切换tooltip。
`shared / split`	boolean	false	一个框中的所有series / 单个系列标注。
`useHTML`	boolean	false	HTML渲染而非SVG。
`headerFormat / pointFormat / footerFormat`	string	—	标头 / 每行 / 页脚的模板。
`formatter`	function	—	完全控制；覆盖格式字符串。
`backgroundColor / borderColor / borderWidth / borderRadius`	string / string / number / number	'#fff' / — / 1 / 3	框样式。
`padding / shadow / animation`	number / boolean / boolean	8 / true / true	框padding、阴影、过渡。
`hideDelay`	number	500	离开后隐藏前的ms数。
`followPointer / stickOnContact`	boolean	false	跟随光标 / 悬停时保持。
`snap / distance`	number	10 / 16	触发距离 / 与点的间隙。
`outside`	boolean	false	在容器外渲染以避免裁剪。
`valueDecimals / valuePrefix / valueSuffix`	number / string / string	—	数字格式化助手。

模板令牌

在headerFormat、pointFormat、footerFormat和dataLabels.format中使用：

Token	描述
`{point.x} / {point.y} / {point.z}`	X、Y和Z（气泡）值。
`{point.key} / {point.name}`	类别/标头 / 点名称（饼、漏斗……）。
`{point.color} / {point.percentage}`	点颜色 / 堆栈或饼图series的百分比。
`{series.name}`	Series名称。
`{point.y:.2f}`	Y格式化为2位小数。

tooltip: {
  shared: true,
  formatter() {
    let html = '<b>' + this.x + '</b><br/>';
    this.points.forEach(p => {
      html += '<span style="color:' + p.color + '">\u25CF</span> '
            + p.series.name + ': <b>' + p.y.toLocaleString() + '</b><br/>';
    });
    return html;
  }
}

legend

属性	类型	默认值	描述
`enabled`	boolean	true	显示/隐藏图例。
`layout`	string	'horizontal'	'horizontal' \| 'vertical'。
`align / verticalAlign`	string	'center' / 'bottom'	在图表内的位置。
`floating`	boolean	false	浮在图表内容上。
`x / y / margin / padding`	number	0 / 0 / 15 / 8	偏移和间距。
`itemDistance / itemMarginTop / itemMarginBottom`	number	20 / 0 / 0	项目之间的间距。
`symbolWidth / symbolHeight / symbolRadius / symbolPadding`	number	16 / 12 / 2 / 5	图例符号尺寸。
`squareSymbol / reversed`	boolean	true / false	正方形符号 / 反向项目顺序。
`itemStyle / itemHoverStyle / itemHiddenStyle`	object	—	按状态的项目文本样式。
`backgroundColor / borderColor / borderWidth`	string / string / number	— / — / 0	图例框样式。
`maxHeight`	number	—	上限高度；超出时分页。
`labelFormatter`	function	—	自定义项目文本（this = series/point）。

plotOptions

默认series选项在三个级别合并： plotOptions.series （所有类型） → plotOptions[type] （一种类型） → series[i] （最高优先级）。

plotOptions: {
  series: { animation: { duration: 1500 }, cursor: 'pointer' },
  column: { borderRadius: 4, groupPadding: 0.15 },
  line:   { lineWidth: 3, marker: { enabled: true, radius: 5 } }
}

colorAxis

将值映射到颜色梯度（热力图、矩形树图、地理着色图）。单个对象或数组。

属性	类型	默认值	描述
`min / max`	number	—	值范围；如果省略则从数据自动推断。
`minColor / maxColor`	string	—	标度每端的颜色。
`stops`	array[]	—	梯度停止[[0,color],[0.5,color],[1,color]]。
`type / reversed`	string / boolean	'linear' / false	标度类型 / 反向方向。
`dataClasses`	object[]	—	离散类{ from, to, color, name }。
`labels`	object	—	颜色轴图例标签（轴标签形状）。

exporting

属性	类型	默认值	描述
`enabled`	boolean	true	启用导出模块+上下文按钮。
`filename`	string	'chart'	默认文件名（无扩展名）。
`type`	string	'image/png'	默认导出MIME类型。
`scale`	number	2	光栅分辨率缩放。
`printMaxWidth`	number	780	打印时的最大宽度。
`buttons.contextButton`	object	—	{ enabled, menuItems, x, y }。
`csv`	object	—	{ columnHeaderFormatter, dateFormat, itemDelimiter, lineDelimiter, decimalPoint }。

格式： image/png, image/jpeg, image/svg+xml, application/pdf （需要可选的 jspdf 对等方）和CSV。

responsive

在视口条件匹配时合并选项覆盖的规则。

responsive: {
  rules: [
    { condition: { maxWidth: 500 },
      chartOptions: { legend: { enabled: false }, yAxis: { title: { text: null } } } },
    { condition: { maxWidth: 300 },
      chartOptions: { title: { text: null }, subtitle: { text: null } } }
  ]
}

条件	类型	描述
`maxWidth / minWidth`	number	在此宽度或以下 / 以上应用。
`maxHeight / minHeight`	number	在此高度或以下 / 以上应用。
`callback`	function	自定义谓词；接收图表。

accessibility

属性	类型	默认值	描述
`enabled`	boolean	true	切换a11y模块。
`description`	string	—	图表的屏幕阅读器描述。
`keyboardNavigation.enabled`	boolean	true	通过元素进行键盘导航。
`keyboardNavigation.focusBorder`	object	—	焦点指示器{ color, margin, style }。
`keyboardNavigation.order`	string[]	—	组件的Tab顺序。
`keyboardNavigation.seriesNavigation`	object	—	{ mode, skipNullPoints, pointNavigationEnabledThreshold }。
`announceNewData.enabled`	boolean	false	通过ARIA实时区域公告新数据。
`highContrastMode`	string \| boolean	'auto'	true \| false \| 'auto'（检测OS）。
`point.descriptionFormatter`	function	—	自定义每点的无障碍描述。

drilldown

属性	类型	默认值	描述
`animation`	boolean \| object	true	动画钻取过渡。
`allowPointDrilldown`	boolean	true	通过点击单个点进行钻取。
`series`	array	[]	钻取子series，每个都有唯一id。
`drillUpButton`	object	—	{ relativeTo, position, theme }。
`breadcrumbs`	object	—	{ enabled, format, formatter, style, position }。

series: [{
  colorByPoint: true,
  data: [{ name: 'North', y: 310, drilldown: 'north' },
         { name: 'South', y: 260, drilldown: 'south' }]
}],
drilldown: {
  breadcrumbs: { enabled: true },
  series: [
    { id: 'north', data: [['NYC', 120], ['Boston', 95]] },
    { id: 'south', data: [['Miami', 90], ['Atlanta', 85]] }
  ]
}

navigator & rangeSelector

股票/时间序列chrome通过 katucharts.js 入口点。导航器是迷你概览图表；范围选择器添加预设时间范围按钮。

属性	类型	默认值	描述
`navigator.enabled / height / margin`	boolean / number / number	true / 40 / 25	切换、调整大小和导航器的间隙。
`navigator.maskFill / outlineColor / outlineWidth`	string / string / number	rgba(102,133,194,.3) / '#ccc' / 1	遮罩和轮廓样式。
`navigator.baseSeries / series`	number\|string / object	0 / —	源series / 迷你图表覆盖。
`rangeSelector.enabled / selected`	boolean / number	true / —	切换 / 初始按钮索引。
`rangeSelector.inputEnabled`	boolean	true	日期输入字段。
`rangeSelector.buttons`	object[]	—	{ type, count, text } — type ∈ second…year、ytd、all。
`rangeSelector.dropdown`	string	'responsive'	'always' \| 'never' \| 'responsive'。

loading & credits

属性	类型	默认值	描述
`loading.showDuration / hideDuration`	number	100	加载覆盖层的淡入/淡出（ms）。
`loading.style / labelStyle`	object	—	覆盖和标签CSS。
`credits.enabled / text / href`	boolean / string / string	true / 'Powered by: KatuCharts' / —	致谢标签。
`credits.position / style`	object	{ align:'right', verticalAlign:'bottom' }	致谢放置和样式。

通过显示加载覆盖层 chart.showLoading() 并通过隐藏 chart.hideLoading()。

动态更新

图表创建后会暴露一套命令式 API，可在运行时更改数据、系列和配置，而无需重新创建。

方法	描述
`chart.update(options, redraw?)`	合并新配置并重绘图表（类型、标题、坐标轴、系列等）。
`chart.series[i]`	访问已渲染的系列实例以单独更新它们。
`series.setData(data, redraw?, animation?)`	替换某个系列的全部数据。
`series.addPoint(point, redraw?, shift?)`	追加一个点；启用 shift 时移除最旧的点（滑动窗口）。
`chart.addSeries(options, redraw?)`	在运行时添加新系列。
`chart.setTitle(title, subtitle?)`	更新标题和副标题文本。
`chart.showLoading(text?) / hideLoading()`	显示和隐藏加载遮罩。
`chart.redraw() / reflow()`	强制重绘或使图表重新适配容器。
`chart.destroy()`	销毁图表并释放事件监听器。

实时示例

下面两个图表使用运行时 API：一个持续接收新点，另一个每次点击切换类型。

实时数据

读数的滑动窗口：每秒进入一个新值、移除最旧的值，并通过 chart.series[0].setData(history) 重绘系列。

const chart = KatuCharts.chart('container', {
  chart: { type: 'line', animation: false },
  yAxis: { min: 0, max: 100 },
  series: [{ name: 'Requests/s', data: history, marker: { enabled: false } }]
});

setInterval(() => {
  history.push(nextReading());
  history.shift();
  chart.series[0].setData(history);
}, 1000);

切换类型

通过 chart.update 设置新的 chart.type，将相同数据重绘为其他类型，无需重新创建。

const chart = KatuCharts.chart('container', {
  chart: { type: 'column' },
  xAxis: { categories: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6'] },
  series: [{ name: 'Revenue', data: [42, 58, 35, 71, 49, 63] }]
});

columnButton.onclick = () => chart.update({ chart: { type: 'column' } });
barButton.onclick = () => chart.update({ chart: { type: 'bar' } });