//.........这里部分代码省略.........
        $split_margin = preg_split('/([\\d\\.]+)/', $margin, 2, PREG_SPLIT_DELIM_CAPTURE);
        $margin = !empty($split_margin[1]) ? $split_margin[1] : 0;
        $units = !empty($split_margin[2]) ? $split_margin[2] : 'px';
        $pattern[] = '/\\"\\"\\s*vc_element_margin_bottom\\s*\\"\\"/';
        $replace[] = $margin . $units;
        $pattern[] = '/\\"\\"\\s*vc_margin_bottom_third\\s*\\"\\"/';
        $replace[] = (double) $margin / 3 . $units;
        $pattern[] = '/\\"\\"\\s*vc_margin_bottom_gold\\s*\\"\\"/';
        $replace[] = (double) $margin / 1.61 . $units;
        $gutter = ($gutter = get_option(self::$field_prefix . 'gutter')) ? $gutter : '';
        if (!self::_isGutterValid($gutter)) {
            $gutter = self::$defaults['gutter'];
        }
        $columns = 12.0;
        $tour_nav_spanX = 4.0;
        $fluidGridGutterWidth = (double) $gutter;
        // this comes from Design Options tab
        $fluidGridColumnWidth = (100 - ($columns - 1) * $fluidGridGutterWidth) / $columns;
        $spans_sizes = array();
        for ($span_size = 1; $span_size <= 12; $span_size++) {
            $w = $fluidGridColumnWidth * $span_size + $fluidGridGutterWidth * ($span_size - 1);
            $pattern[] = '/\\"\\"\\s*vc_span' . $span_size . '\\s*\\"\\"/';
            $replace[] = $w . 'px';
            $spans_sizes['vc_span' . $span_size] = $w;
        }
        $pattern[] = '/\\"\\"\\s*vc_margin_left\\s*\\"\\"/';
        $replace[] = $fluidGridGutterWidth . '%';
        // @fluidGridGutterWidth;
        $pattern[] = '/\\"\\"\\s*vc_negative_margin_left\\s*\\"\\"/';
        $replace[] = -1 * $fluidGridGutterWidth . '%';
        // @vc_teaser_grid_w:100% + @fluidGridGutterWidth
        $pattern[] = '/\\"\\"\\s*vc_teaser_grid_w\\s*\\"\\"/';
        $replace[] = 100 + $fluidGridGutterWidth . '%';
        // @vc_teaser_grid_span2: 100% / @gridColumns * 2 - @fluidGridGutterWidth - 0.15%
        $pattern[] = '/\\"\\"\\s*vc_teaser_grid_span2\\s*\\"\\"/';
        $replace[] = 100.0 / $columns * 2.0 - $fluidGridGutterWidth - 0.15 . '%';
        // @vc_teaser_grid_span3: 100% / @gridColumns * 3 - @fluidGridGutterWidth - 0.08%
        $pattern[] = '/\\"\\"\\s*vc_teaser_grid_span3\\s*\\"\\"/';
        $replace[] = 100.0 / $columns * 3.0 - $fluidGridGutterWidth - 0.08 . '%';
        // @vc_teaser_grid_span3: 100% / @gridColumns * 4 - @fluidGridGutterWidth - 0.08%
        $pattern[] = '/\\"\\"\\s*vc_teaser_grid_span4\\s*\\"\\"/';
        $replace[] = 100.0 / $columns * 4.0 - $fluidGridGutterWidth - 0.08 . '%';
        // @vc_teaser_grid_span3: 100% / @gridColumns * 6 - @fluidGridGutterWidth - 0.05%
        $pattern[] = '/\\"\\"\\s*vc_teaser_grid_span6\\s*\\"\\"/';
        $replace[] = 100.0 / $columns * 6.0 - $fluidGridGutterWidth - 0.05 . '%';
        //  @vc_teaser_grid_span12: 100% - @fluidGridGutterWidth
        $pattern[] = '/\\"\\"\\s*vc_teaser_grid_span12\\s*\\"\\"/';
        $replace[] = 100 - $fluidGridGutterWidth . '%';
        // @vc_cta_button_w: 100% - 70% - @fluidGridGutterWidth
        $pattern[] = '/\\"\\"\\s*vc_cta_button_w\\s*\\"\\"/';
        $replace[] = 100.0 - 70.0 - $fluidGridGutterWidth . '%';
        // @tour_nav_width: @vc_span1 * @tour_nav_spanX + @fluidGridGutterWidth * (@tour_nav_spanX - 1)
        $pattern[] = '/\\"\\"\\s*vc_tour_nav_width\\s*\\"\\"/';
        $replace[] = $tour_nav_width = $spans_sizes['vc_span1'] * $tour_nav_spanX + $fluidGridGutterWidth * ($tour_nav_spanX - 1) . '%';
        // @tour_slides_width: 100% - @tour_nav_width
        $pattern[] = '/\\"\\"\\s*vc_tour_slides_width\\s*\\"\\"/';
        $replace[] = 100.0 - $tour_nav_width . '%';
        $responsive_max = ($responsive_max = get_option(self::$field_prefix . 'responsive_max')) ? $responsive_max : '';
        if (!self::_isNumberValid($responsive_max)) {
            $responsive_max = self::$defaults['responsive_max'];
        }
        // $pattern[] = '/\"\"\s*vc_responsive_max_w\s*\"\"/';
        // $replace[] = $responsive_max.'px';
        $css_string = preg_replace('/((?<=min\\-width\\:\\s)\\d+px(?=\\)\\s\\{\\s+\\.vc_responsive))/m', $responsive_max . 'px', $css_string);
        $main_accent_color = ($main_accent_color = get_option(self::$field_prefix . 'vc_color')) ? $main_accent_color : self::$defaults['vc_color'];
        //Call to action border color
        $cta_bg = ($cta_bg = get_option(self::$field_prefix . 'vc_color_call_to_action_bg')) ? $cta_bg : $main_accent_color;
        $pattern[] = '/\\"\\"\\s*vc_call_to_action_border\\s*\\"\\"/';
        $replace[] = vc_colorCreator($cta_bg, -5);
        $pattern[] = '/(url\\(\\.\\.\\/(?!\\.))/';
        $replace[] = 'url(' . vc_asset_url('/');
        $css_string = preg_replace($pattern, $replace, $css_string);
        $array_span_css = array();
        $i = 1;
        while ($i <= 12) {
            $array_span_css[] = '.vc_responsive .wpb_row .vc_span' . $i . ', .vc_non_responsive .wpb_row .vc_span' . $i++;
        }
        // @fluidGridGutterWidth;
        $css_string .= '' . implode(',' . "\n", $array_span_css) . ', .vc_container {
		padding-left: ' . $fluidGridGutterWidth / 2 . 'px;
		padding-right: ' . $fluidGridGutterWidth / 2 . 'px;
	}
	.wpb_row {
	  margin-left: -' . $fluidGridGutterWidth / 2 . 'px;
	  margin-right: -' . $fluidGridGutterWidth / 2 . 'px;
	}';
        // HERE goes the magic
        if (!$wp_filesystem->put_contents($filename, $css_string, FS_CHMOD_FILE)) {
            if (is_wp_error($wp_filesystem->errors) && $wp_filesystem->errors->get_error_code()) {
                add_settings_error(self::$field_prefix . 'main_color', $wp_filesystem->errors->get_error_code(), __('Something went wrong: js_composer_front_custom.css could not be created.', LANGUAGE_ZONE) . ' ' . $wp_filesystem->errors->get_error_message(), 'error');
            } elseif (!$wp_filesystem->connect()) {
                add_settings_error(self::$field_prefix . 'main_color', $wp_filesystem->errors->get_error_code(), __('js_composer_front_custom.css could not be created. Connection error.', LANGUAGE_ZONE), 'error');
            } elseif (!$wp_filesystem->is_writable($filename)) {
                add_settings_error(self::$field_prefix . 'main_color', $wp_filesystem->errors->get_error_code(), sprintf(__('js_composer_front_custom.css could not be created. Cannot write custom css to "%s".', LANGUAGE_ZONE), $filename), 'error');
            } else {
                add_settings_error(self::$field_prefix . 'main_color', $wp_filesystem->errors->get_error_code(), __('js_composer_front_custom.css could not be created. Problem with access.', LANGUAGE_ZONE), 'error');
            }
            delete_option(self::$field_prefix . 'use_custom');
        }
    }

        }
    } else {
        $color = $base_colors['normal'][$stroke_color];
    }
    $options[] = 'data-vc-stroke-color="' . $color . '"';
}
if (!empty($stroke_width)) {
    $options[] = 'data-vc-stroke-width="' . $stroke_width . '"';
}
$values = (array) vc_param_group_parse_atts($values);
$data = array();
foreach ($values as $k => $v) {
    if ('custom' === $style) {
        if (!empty($v['custom_color'])) {
            $color = $v['custom_color'];
            $highlight = vc_colorCreator($v['custom_color'], -10);
            //10% darker
        } else {
            $color = $base_colors['normal']['grey'];
            $highlight = $base_colors['active']['grey'];
        }
    } else {
        $color = isset($colors[$style]['normal'][$v['color']]) ? $colors[$style]['normal'][$v['color']] : $v['normal']['color'];
        $highlight = isset($colors[$style]['active'][$v['color']]) ? $colors[$style]['active'][$v['color']] : $v['active']['color'];
    }
    $data[] = array('value' => intval(isset($v['value']) ? $v['value'] : 0), 'color' => $color, 'highlight' => $highlight, 'label' => isset($v['title']) ? $v['title'] : '');
}
$options[] = 'data-vc-type="' . esc_attr($type) . '"';
$options[] = 'data-vc-values="' . esc_attr(json_encode($data)) . '"';
if ('' !== $title) {
    $title = '<h2 class="wpb_heading">' . $title . '</h4>';

    } else {
        $color = isset($colors[$style]['normal'][$v['color']]) ? $colors[$style]['normal'][$v['color']] : $v['normal']['color'];
        $highlight = isset($colors[$style]['active'][$v['color']]) ? $colors[$style]['active'][$v['color']] : $v['active']['color'];
    }
    // don't use gradients for lines
    if ('line' === $type) {
        $color = is_array($color) ? end($color) : $color;
        $highlight = is_array($highlight) ? end($highlight) : $highlight;
        $rgb = hex2rgb($color);
        $fill_color = 'rgba(' . $rgb[0] . ', ' . $rgb[1] . ', ' . $rgb[2] . ', 0.1)';
    } else {
        $fill_color = $color;
    }
    if ('modern' === $style) {
        $stroke_color = vc_colorCreator(is_array($color) ? end($color) : $color, -7);
        $highlight_stroke_color = vc_colorCreator($stroke_color, -7);
    } else {
        $stroke_color = $color;
        $highlight_stroke_color = $highlight;
    }
    $data['datasets'][] = array('label' => isset($v['title']) ? $v['title'] : '', 'fillColor' => $fill_color, 'strokeColor' => $stroke_color, 'pointColor' => $color, 'pointStrokeColor' => $color, 'highlightFill' => $highlight, 'highlightStroke' => $highlight_stroke_color, 'pointHighlightFill' => $highlight_stroke_color, 'pointHighlightStroke' => $highlight_stroke_color, 'data' => explode(';', isset($v['y_values']) ? trim($v['y_values'], ';') : ''));
}
$options[] = 'data-vc-type="' . esc_attr($type) . '"';
$options[] = 'data-vc-values="' . htmlentities(json_encode($data)) . '"';
if ('' !== $title) {
    $title = '<h2 class="wpb_heading">' . $title . '</h4>';
}
$canvas_html = '<canvas class="vc_line-chart-canvas" width="1" height="1"></canvas>';
$legend_html = '';
if ($legend) {
    foreach ($data['datasets'] as $v) {