在 chart.js 上設置雷達圖數據時遇到問題； 循環問題

Question

我有一個正在為 wordpress 編碼的插件，它使用一個短代碼並提供選擇帖子類型、分類法和分組分類術語顏色的能力。它計算並標記指定分類法中的所有術語，按分類法對它們進行分組，並使用 Chart.js 將它們繪制在雷達圖上，每個數據集有多個數據點。 此版本使用術語名稱作為雷達圖標簽，使用分類法名稱作為數據集標簽，並根據分類法對數據集進行着色。

該插件工作正常，但對於循環的一次迭代，所有術語計數始終為 1。 因為在我的數據數組中，我有一輪等於 1 的計數，然后所有其余的寄存器，但數據 = 0

我知道我有解決方案，但不確定實施它的最佳方式？

代碼如下：

<?php
/*
 * Plugin Name: Taxonomy Radar Chart
 * Description: A WordPress plugin that uses a shortcode to display a radar chart of taxonomy terms. [taxonomy_radar_chart post_types="content" taxonomies="style,tone,difficulty,content-type" colors="#F44336,#9C27B0,#2196F3,#4CAF50"]
 */

function taxonomy_radar_chart_shortcode( $atts ) {
    // Parse shortcode attributes
    $atts = shortcode_atts(
        array(
            'post_types' => 'post',
            'taxonomies' => 'category',
            'colors'     => '',
        ),
        $atts,
        'taxonomy_radar_chart'
    );
    // Get post types and taxonomies as arrays
    $post_types = array_map( 'trim', explode( ',', $atts['post_types'] ) );
    $taxonomies = array_map( 'trim', explode( ',', $atts['taxonomies'] ) );

    // Get colors as array, or use default colors
    if ( empty( $atts['colors'] ) ) {
        $colors = array(
            '#F44336',
            '#9C27B0',
            '#2196F3',
            '#4CAF50',
            '#FFEB3B',
            '#795548',
            '#607D8B',
            '#E91E63',
            '#009688',
            '#00BCD4',
            '#FF9800',
            '#CDDC39',
        );
    } else {
        $colors = array_map( 'trim', explode( ',', $atts['colors'] ) );
    }

    // Get term counts and labels
    $term_counts = array();
    $labels      = array();
    // Loop through post types and taxonomies
    foreach ( $post_types as $post_type ) {
        foreach ( $taxonomies as $taxonomy ) {
            $terms = get_terms(
                array(
                    'taxonomy'   => $taxonomy,
                    'hide_empty' => false,
                )
            );

            // Loop through terms and get count for each
            foreach ( $terms as $term ) {
                $term_count = wp_count_posts( $post_type, array( 'tax_query' => array( array( 'taxonomy' => $taxonomy, 'field' => 'slug', 'terms' => $term->slug ) ) ) );
                $term_count = $term_count->publish;

                // Add term count and label to arrays
                $term_counts[ $taxonomy ][ $term->name ] = $term_count;
                $labels[]                                = $term->name;
            }
        }
    }

    // Remove duplicate labels
    $labels = array_unique( $labels );

    // Set up radar chart data
    $datasets = array();
    foreach ( $term_counts as $taxonomy => $counts ) {
        $dataset = array(
            'label'           => $taxonomy,
            'backgroundColor' => array_shift( $colors ),
            'data'            => array(),
        );
        foreach ( $labels as $label ) {
            $dataset['data'][] = isset( $counts[ $label ] ) ? $counts[ $label ] : 0;
        }
        $datasets[] = $dataset;
    }
    // Enqueue Chart.js library
    wp_enqueue_script( 'chartjs', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js', array(), '2.9.3', true );

    // Print chart container
    $chart_id = uniqid( 'taxonomy_radar_chart_' );
    printf(
        '<canvas id="%s" width="400" height="400"></canvas>',
        esc_attr( $chart_id )
    );

    // Print chart script
    $data = array(
        'labels'   => $labels,
        'datasets' => $datasets,
    );
    $options = array();
    printf(
        '<script>
            jQuery(function($) {
                var ctx = document.getElementById("%s").getContext("2d");
                var chart = new Chart(ctx, {
                    type: "radar",
                    data: %s,
                    options: %s
                });
            });
        </script>',
        esc_attr( $chart_id ),
        wp_json_encode( $data ),
        wp_json_encode( $options )
    );
}
add_shortcode( 'taxonomy_radar_chart', 'taxonomy_radar_chart_shortcode' );

Answer 1

這幾乎是完美的......我的問題是我使用wp_count_posts的方式。 它不像我想的那樣計算術語。

現在，此代碼使用get_objects_in_term()函數獲取分配了指定術語的帖子 ID 數組，然后使用 count() 函數獲取該數組中的帖子數。

但是，在雷達圖的中心，我的所有數據點都具有 0 值。 然而，它們也正確地映射在我的圖表上對應於標簽。 我怎樣才能擺脫它以及發生了什么事？

新代碼如下：

<?php
/*
 * Plugin Name: Taxonomy Radar Chart
 * Description: A WordPress plugin that uses a shortcode to display a radar chart of taxonomy terms. [taxonomy_radar_chart post_types="content" taxonomies="styles,tone,difficulty,content-type" colors="#F44336,#9C27B0,#2196F3,#4CAF50"]
 */

function taxonomy_radar_chart_shortcode( $atts ) {
    // Parse shortcode attributes
    $atts = shortcode_atts(
        array(
            'post_types' => 'post',
            'taxonomies' => 'category',
            'colors'     => '',
        ),
        $atts,
        'taxonomy_radar_chart'
    );
    // Get post types and taxonomies as arrays
    $post_types = array_map( 'trim', explode( ',', $atts['post_types'] ) );
    $taxonomies = array_map( 'trim', explode( ',', $atts['taxonomies'] ) );

    // Get colors as array, or use default colors
    if ( empty( $atts['colors'] ) ) {
        $colors = array(
            '#F44336',
            '#9C27B0',
            '#2196F3',
            '#4CAF50',
            '#FFEB3B',
            '#795548',
            '#607D8B',
            '#E91E63',
            '#009688',
            '#00BCD4',
            '#FF9800',
            '#CDDC39',
        );
    } else {
        $colors = array_map( 'trim', explode( ',', $atts['colors'] ) );
    }

    // Get term counts and labels
    $term_counts = array();
    $labels      = array();
    // Loop through post types and taxonomies
    foreach ( $post_types as $post_type ) {
        foreach ( $taxonomies as $taxonomy ) {
            $terms = get_terms(
                array(
                    'taxonomy'   => $taxonomy,
                    'hide_empty' => false,
                )
            );

            // Loop through terms and get count for each
            foreach ( $terms as $term ) {
                $term_count = wp_count_posts( $post_type, array( 'tax_query' => array( array( 'taxonomy' => $taxonomy, 'field' => 'slug', 'terms' => $term->slug ) ) ) );
                $term_count = $term_count->publish;

                // Add term count and label to arrays
                $term_counts[ $taxonomy ][ $term->name ] = $term_count;
                $labels[]                                = $term->name;
            }
        }
    }

    // Remove duplicate labels
    $labels = array_unique( $labels );

    // Set up radar chart data
    $datasets = array();
    foreach ( $term_counts as $taxonomy => $counts ) {
        $dataset = array(
            'label'           => $taxonomy,
            'backgroundColor' => array_shift( $colors ),
            'data'            => array(),
        );
        foreach ( $labels as $label ) {
            $dataset['data'][] = isset( $counts[ $label ] ) ? $counts[ $label ] : 0;
        }
        $datasets[] = $dataset;
    }
    // Enqueue Chart.js library
    wp_enqueue_script( 'chartjs', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js', array(), '2.9.3', true );

    // Print chart container
    $chart_id = uniqid( 'taxonomy_radar_chart_' );
    printf(
        '<canvas id="%s" width="400" height="400"></canvas>',
        esc_attr( $chart_id )
    );

    // Print chart script
    $data = array(
        'labels'   => $labels,
        'datasets' => $datasets,
    );
    $options = array();
    printf(
        '<script>
            jQuery(function($) {
                var ctx = document.getElementById("%s").getContext("2d");
                var chart = new Chart(ctx, {
                    type: "radar",
                    data: %s,
                    options: %s
                });
            });
        </script>',
        esc_attr( $chart_id ),
        wp_json_encode( $data ),
        wp_json_encode( $options )
    );
}
add_shortcode( 'taxonomy_radar_chart', 'taxonomy_radar_chart_shortcode' );