Highcharts solidgauge - 可重复的div - php变量中的重复值答案

【问题标题】：Highcharts solidgauge - repeatable div's - duplicate value in php variableHighcharts solidgauge - 可重复的div - php变量中的重复值
【发布时间】：2015-09-16 07:39:44
【问题描述】：

我对 highcharts SolidGauge 有以下问题。请查找一些上下文 - 将为我从 MySql 调用的每条评论显示 SolidGauge。每个评论都为 PHP 变量 [$myvalue] 引入每个评论 ID 的专有值 - [$myvalue] 在图表代码之外调用，在同一个文件中，工作得非常好，并为每个评论正确显示分布值。

问题 - [$myvalue] 显示 UI 中显示的每个图表的重复值 - 或者确切地说是最后一个评论值，即 [8] - 所以所有图表都显示值 [8]。请帮助 :) 我已经尝试了一切（从取消设置、销毁等）

$(function () {                                             
 $(document).ready(function () {            

// The speed gauge
$('.container-speed').each(function() {         
    var chart = new Highcharts.Chart({

    chart: {                                        
        type: 'solidgauge',
        backgroundColor:'rgba(255, 255, 255, 0.1)',
        renderTo: this
    },
    pane: {
        center: ['50%', '50%'],
        size: '65%',
        startAngle: 0,
        endAngle: 360,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#f5f5f5',
            innerRadius: '90%',
            outerRadius: '80%',
            shape: 'circle'
        }
    },
    tooltip: {
        enabled: false
    },
    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: -15,
                borderWidth: 0,
                useHTML: true
            }
        }
    },
     title: null,
    yAxis: {
        min: 0,
        max: 8,
         stops: [
            [0.99, '#55BF3B'], // green
            [1.1, '#DDDF0D'], // yellow
            [1.2, '#DF5353'] // red
        ],
         lineWidth: 0,
        minorTickInterval: null,
        tickPixelInterval: 100,
        tickWidth: 0,
        title: {
            y: -70
        },
        labels: {
            y: 90,
            x: 30
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        data: [<?php echo $myvalue; ?>],
        dataLabels: {
            format: '<div style="text-align:center;"><span style="font-size:14px;color:' +
                                                  ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'gray') + '"><?php echo $myvalue; ?></span></div>'
        }}] })      })                                                  
 })                                                                         
});

【问题讨论】：

对我来说，工作正常jsfiddle.net/3cmwLm8s/2。
与随机数学函数完美配合 - 感谢您的输入 - 但是 php 循环（在 Wordpress 中）有一些冲突，因为分配给 DataSet 的变量总是在内部返回一个输出（最后一个评论 ID） JS脚本...我必须弄清楚:)

标签： javascript php highcharts

【解决方案1】：

您应该在调用时迭代值

$('.container-speed').each(function() //pass value in this function

在这个函数中传递值，然后在数据标签中调用它。

【讨论】：

感谢输入 - 返回空白（无图表） $('.container-speed').each(function() 和之前的 $('.容器速度').each(function()

【解决方案2】：

$( 文档 ).ready(function() { var gaugeOptions = {

    chart: {
        type: 'solidgauge',
        backgroundColor:'rgba(255, 255, 255, 0.1)'
    },

    title: null,

    pane: {
        center: ['50%', '50%'],
        size: '55%',
        startAngle: 0,
        endAngle: 270,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#f5f5f5',
            innerRadius: '90%',
            outerRadius: '90%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [1.0, '#55BF3B'], // green
            [1.1, '#DDDF0D'], // yellow
            [1.3, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickPixelInterval: 45,
        tickWidth: 1,
        title: {
            y: -70
        },
        labels: {
            y: 90,
            x: 30
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: -15,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};

// My Container
$('#container_myContainer_<? echo $comment->comment_ID ?>').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 8
    },

    credits: {
        enabled: false
    },

    series: [{
        data: [<? echo get_comment_meta( $comment->comment_ID, 'myValue', true )?>],
        dataLabels: {
            format: '<div style="text-align:center;"><span style="font-size:14px;color:' +
                                                  ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'gray') + '"><? echo get_comment_meta( $comment->comment_ID, 'myValue', true )?></span></div>'
        }
    }]

}))

})

【讨论】：