[candlestick] Fix apache#6059 (first data entry is empty)

mlgmlg103 · Jun 26, 2017 · 34e41df · 34e41df
1 parent 31c3521
commit 34e41df
Show file tree

Hide file tree

Showing 2 changed files with 151 additions and 2 deletions.
diff --git a/src/chart/helper/whiskerBoxCommon.js b/src/chart/helper/whiskerBoxCommon.js
@@ -58,6 +58,7 @@ define(function(require) {
                 zrUtil.isArray(item) && item.unshift(index);
             });
 
+            var defaultValueDimensions = this.defaultValueDimensions;
             var dimensions = [{
                 name: baseAxisDim,
                 otherDims: {
@@ -66,12 +67,14 @@ define(function(require) {
                 dimsDef: ['base']
             }, {
                 name: otherAxisDim,
-                dimsDef: this.defaultValueDimensions.slice()
+                dimsDef: defaultValueDimensions.slice()
             }];
 
             dimensions = completeDimensions(dimensions, data, {
                 encodeDef: this.get('encode'),
-                dimsDef: this.get('dimensions')
+                dimsDef: this.get('dimensions'),
+                // Consider empty data entry.
+                dimCount: defaultValueDimensions.length + 1
             });
 
             var list = new List(dimensions, this);

diff --git a/test/candlestick-empty.html b/test/candlestick-empty.html
@@ -0,0 +1,146 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <script src="lib/facePrint.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+        <div id="info"></div>
+        <div id="main"></div>
+        <script>
+
+            /**
+             * @see <https://en.wikipedia.org/wiki/Michelson%E2%80%93Morley_experiment>
+             * @see <http://bl.ocks.org/mbostock/4061502>
+             */
+            var chart;
+            var data;
+
+            require([
+                'echarts',
+                'echarts/chart/candlestick',
+                'echarts/chart/line',
+                'echarts/component/title',
+                'echarts/component/legend',
+                'echarts/component/grid',
+                'echarts/component/tooltip',
+                'echarts/component/dataZoom',
+                'echarts/component/markPoint',
+                'echarts/component/markLine'
+            ], function (echarts) {
+
+                chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'canvas'
+                });
+
+
+                var data0 = splitData([
+                    ['2013/1/24'],
+                    ['2013/1/25', 2300,2291.3,2288.26,2308.38],
+                    ['2013/1/28'],
+                    ['2013/1/29', 2347.22,2358.98,2337.35,2363.8],
+                    ['2013/1/30'],
+                    ['2013/1/31', 2383.43,2385.42,2371.23,2391.82],
+                    ['2013/2/1', 2377.41,2419.02,2369.57,2421.15],
+                    ['2013/2/4', 2425.92,2428.15,2417.58,2440.38],
+                    ['2013/2/5', 2411,2433.13,2403.3,2437.42],
+                    ['2013/2/6', 2432.68,2434.48,2427.7,2441.73],
+                    ['2013/2/7', 2430.69,2418.53,2394.22,2433.89],
+                    ['2013/2/8', 2416.62,2432.4,2414.4,2443.03],
+                    ['2013/2/18', 2441.91,2421.56,2415.43,2444.8],
+                    ['2013/2/19', 2420.26,2382.91,2373.53,2427.07],
+                    ['2013/2/20', 2383.49,2397.18,2370.61,2397.94],
+                    ['2013/2/21', 2378.82,2325.95,2309.17,2378.82],
+                    ['2013/2/22', 2322.94,2314.16,2308.76,2330.88]
+                ]);
+
+                option = {
+                    title: {
+                        text: '上证指数',
+                        left: 0
+                    },
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'cross'
+                        }
+                    },
+                    legend: {
+                        data: ['日K', '日K 空']
+                    },
+                    grid: {
+                        left: '10%',
+                        right: '10%',
+                        bottom: '15%'
+                    },
+                    xAxis: {
+                        type: 'category',
+                        data: data0.categoryData,
+                        scale: true,
+                        boundaryGap : false,
+                        axisLine: {onZero: false},
+                        splitLine: {show: false},
+                        splitNumber: 20,
+                        min: 'dataMin',
+                        max: 'dataMax'
+                    },
+                    yAxis: {
+                        scale: true,
+                        splitArea: {
+                            show: true
+                        }
+                    },
+                    dataZoom: [
+                        {
+                            type: 'inside'
+                        },
+                        {
+                            show: true,
+                            type: 'slider',
+                            y: '90%'
+                        }
+                    ],
+                    series: [
+                        {
+                            name: '日K',
+                            type: 'candlestick',
+                            data: data0.values
+                        },
+                        // {
+                        //     name: '日K 空',
+                        //     type: 'candlestick',
+                        //     data: []
+                        // },
+
+                    ]
+                };
+
+                chart.setOption(option);
+            });
+
+
+            function splitData(rawData) {
+                var categoryData = [];
+                var values = []
+                for (var i = 0; i < rawData.length; i++) {
+                    categoryData.push(rawData[i].splice(0, 1)[0]);
+                    values.push(rawData[i])
+                }
+                return {
+                    categoryData: categoryData,
+                    values: values
+                };
+            }
+
+
+        </script>
+    </body>
+</html>