CBoard CBoard v0.4前端图表自定义添加开发帮助文档

约定：所有的路径均基于项目的 src\main\ 目录。

图表类型初始化

路径：webapp\org\cboard\controller\config\widgetCtrl.js

1.定义图表展示内容

$scope.chart_types = [
{
   // 定义图表的类型为：scatterMap
    name: translate('CONFIG.WIDGET.SCATTER_MAP'), value: 'scatterMap', class: 'cScatterMap',
    row: translate('CONFIG.WIDGET.TIPS_DIM_NUM_1_MORE'),
    column: translate('CONFIG.WIDGET.TIPS_DIM_NUM_0_MORE'),
    measure: translate('CONFIG.WIDGET.TIPS_DIM_NUM_1_MORE')
}

................................ ]

translate: 国际化字段，对应的国际化文件在 webapp\i18n\cn\cboard.json value: 类型名称，和$scope.chart_types_status中的key保持一致。 class: 匹配 webapp\css\cboard.css 中的样式（一般用于配置图表的图片）

2.激活图表页面选择功能

$scope.chart_types_status = {
    "scatterMap":true,  // 在页面激活图标选择，同 $scope.chart_types 中的value。
.................
};

3.配置图表配置参数的html模板（具体实现请查看：$scope.getChartView ）在下面的路径中放入对应的html网页： 'webapp/org/cboard/view/config/chart/' + $scope.curWidget.config.chart_type + '.html'

以上配置完成后，即可在页面中看到对应的图表选择项。

配置图表渲染html模板

路径：webapp\org\cboard\directive\dashboard\dashboardWidget.js

1.配置渲染html模板

var renderScatterMap= function (scope, element, attrs) {
   // 加载 webapp\starter.html 中的渲染html模板
    var template = $templateCache.get("chartContent"); 
   // 渲染模板的高度
    scope.myheight = scope.row.height ? (scope.row.height - 44) : 300;
    var link = $compile(template);
    element.append(link(scope));
    var ndWrapper = $(element).find('.box-body');
    // 调用 webapp\org\cboard\service\chart\chartService.js 的render方法
    scope.widget.render(ndWrapper, null, scope);
};

2.激活图表对应的渲染html模板

switch (scope.widget.widget.data.config.chart_type) {
   ......................................
    case 'scatterMap':
        renderScatterMap(scope, element, attrs);
        break;
.........................................
}

chartService.js

路径：webapp\org\cboard\service\chart\chartService.js

chartService通过switch选择对应图表的service，执行图表service的parseOption方法和render方法。

1.引入新的图表service

cBoard.service('chartService', function ($q, dataService, chartPieService, chartLineService, chartFunnelService, chartSankeyService, chartTableService, chartKpiService, chartRadarService, chartMapService, chartScatterMapService, chartScatterService)

2.配置类型对应的service

getChartServices = function (chartConfig) {
       var chart;
switch (chartConfig.chart_type) {

.......................................
    case 'scatterMap': // 通过类型选择对应图表的service
        chart = chartScatterMapService;
        break;
.......................................
}
}

编写渲染图表的service和render

具体的图表service放入 webapp\org\cboard\service\chart 包中。具体的图表render放入 webapp\org\cboard\service\util 包中。

service必须包含以下两个方法：

render：负责调用对应的Render渲染图表
parseOption：负责渲染图表需要的配置（包括数据结构）

render中负责调用第三方图表的方法一般叫 do 或者 chart 。

注：新写的js和该图表依赖的第三方js需要在 webapp\starter.html 中引入。

以上，抛砖引玉丷

Jul 10 '17 03:07 zz0412

参数行能否添加传统的日期控件和checkbox多选空间，目前参数行支持的select控件选择起来路径才长

Jul 12 '17 11:07 SeanZou

补充： src\main\webapp\org\cboard\controller\config\widgetCtrl.js

列维、行维、过滤、指标的显示配置 $scope.configRule = { ....................................... gauge: {keys: -1, groups: -1, filters: 0, values: 1} };

切换图表时参数设置 $scope.changeChart = function (chart_type) { ....................................... case 'gauge': $scope.curWidget.config.values.push({name: '', cols: []}); _.each(oldConfig.values, function (v) { _.each(v.cols, function (c) { $scope.curWidget.config.values[0].cols.push(c); }); }); $scope.curWidget.config.selects = angular.copy($scope.columns); $scope.curWidget.config.styles = [ {proportion: '0.2', color: '#228b22'}, {proportion: '0.8', color: '#48b'}, {proportion: '1', color: '#ff4500'} ]; break; ....................................... };

初始化图表时参数设置

    $scope.newConfig = function () {
    .......................................
            case 'gauge':
                $scope.curWidget.config.selects = angular.copy($scope.columns);
                $scope.curWidget.config.values = [{
                    name: '',
                    cols: []
                }];
                $scope.curWidget.config.filters = new Array();
                $scope.curWidget.config.styles = [
                    {proportion: '0.2', color: '#228b22'},
                    {proportion: '0.8', color: '#48b'},
                    {proportion: '1', color: '#ff4500'}
                ];
                break;
    .......................................
    };