目录

1. 节点设置页面

2. 注意事项

3.K 线图主题设置

K 线图节点使用说明

作者：王方舟

K 线图是 Data Studio 可视化节点分类中的一个节点，通常用来展示股票数据的走势， K 线图要求 X 轴数据为日期类型， Y 轴数据为数值类型，并且根据 K 线图的特点， Y 轴系列上要有开市值、收市值、最大值以及最小值 4 个要素，每行数据将作为一个柱状与垂直线的组合出现在图中。鼠标浮在每个点时将会弹出提示框显示该点的系列值，支持修改图的标题、横纵坐标轴的标题、调整时间轴值域、改变背景色及网格设置等。

1. 节点设置页面

图 1 为 K 线图节点的设置界页面，在此界面输入数据表中对应的选择 X 、 Y 轴的系列字段，点击右上角的执行预览按钮，将弹出如图 2 的可视化节点浏览对话。左侧提供了标题、时间轴、背景色、主题、显示网格等设置项，点击更新设置将即刻生效。右侧提供了可视化图形的展示，右下方为支持拖拽的 datarange 控件，左右拖拽将会显示不同时间区间的 K 线图。

图表 1 K 线图节点设置页面

图表 2 K 线图浏览页面

2. 注意事项

1. K 线图初始时间轴值域为 75%-100% ，由于股市数据经常更关注最新的数据，因此出于对用户关注度的考虑，将初始值域定义为后 25% 的展现；

2. 时间轴值域拖拽控件支持调整值域，当调整了值域时图形会跟着变大，如图 3 所示；

图表 3 K 线图拖拽控件放缩图表

3.K 线图主题设置

K 线图默认主题为红绿两色（ default.js ），为了使 K 线图主题与蓝色默认主题一直，需要在主题中添加如下所示的 json ：

k: {

        itemStyle: {

            normal: {

                color: '#1bb2d8',          // 阳线填充颜色

                color0: '#99d2dd',      // 阴线填充颜色

                lineStyle: {

                    width: 1,

                    color: '#1c7099',   // 阳线边框颜色

                    color0: '#88b0bb'   // 阴线边框颜色

                }

            }

        }

    }