Modify option for focus grid line - #307

10 years ago · 39b77ecc74
4 changed files with 37 additions and 5 deletions
--- a/c3.js
+++ b/c3.js
@ -234,12 +234,12 @@
            // not used
            // __grid_y_type = getConfig(['grid', 'y', 'type'], 'tick'),
            __grid_y_lines = getConfig(['grid', 'y', 'lines'], []),
-            __grid_y_ticks = getConfig(['grid', 'y', 'ticks'], 10);
+            __grid_y_ticks = getConfig(['grid', 'y', 'ticks'], 10),
+            __grid_focus_show = getConfig(['grid', 'focus', 'show'], true);

        // point - point of each data
        var __point_show = getConfig(['point', 'show'], true),
            __point_r = getConfig(['point', 'r'], 2.5),
-            __point_focus_line_enabled = getConfig(['point', 'focus', 'line', 'enabled'], true),
            __point_focus_expand_enabled = getConfig(['point', 'focus', 'expand', 'enabled'], true),
            __point_focus_expand_r = getConfig(['point', 'focus', 'expand', 'r']),
            __point_select_r = getConfig(['point', 'focus', 'select', 'r']);
@ -2918,7 +2918,7 @@
            if (__grid_x_show) {
                grid.append("g").attr("class", CLASS.xgrids);
            }
-            if (__point_focus_line_enabled) {
+            if (__grid_focus_show) {
                grid.append('g')
                    .attr("class", CLASS.xgridFocus)
                  .append('line')
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/index.html
+++ b/htdocs/index.html
@ -246,6 +246,9 @@
              <a href="./samples/grid_x_lines_timeseries.html">
                 Show optional x grids with timeseries
              </a>
+              <a href="./samples/grid_focus.html">
+                 Hide focus grid
+              </a>
            </div>
            <div class="col-md-4">
              <h3>Region</h3>
--- a/htdocs/samples/grid_focus.html
+++ b/htdocs/samples/grid_focus.html
@ -0,0 +1,29 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/css/c3.css">
+  </head>
+  <body>
+    <div id="chart1"></div>
+
+    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
+    <script src="/js/c3.js"></script>
+    <script>
+
+      var chart1 = c3.generate({
+        bindto: '#chart1',
+        data: {
+          columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 300, 200, 300, 250, 150]
+          ]
+        },
+        grid: {
+          focus: {
+            show: false
+          }
+        }
+      });
+
+    </script>
+  </body>
+</html>