如何将刻度盘设置为 angular 仪表融合图中输入的值

Question

我正在使用融合图表库。因为我正在为我的报告使用 Angular 仪表图表。我遇到了表盘问题，它是由融合图表库根据我们传递给它的表盘值自动设置的。

它把最小值和最大值分成4等份并显示。我想覆盖它。我想显示我们给的每个部分的最大值

当前输出：

预期输出：

我的代码在这里：

var bw1 = parseInt($('.ideal_weight_graph').data('ideal1'));//46
    var bw2 = parseInt($('.ideal_weight_graph').data('ideal2'));//62
    var bw = parseInt($('.ideal_weight_graph').data('weight'));//53

    var bw3 = bw2 + bw1;

    var fusioncharts = new FusionCharts({
        type : 'angulargauge',
        renderAt : 'ideal_weight_graph',
        width : '400',
        height : '250',
        dataFormat : 'json',
        dataSource : {
            "chart" : {
                "caption" : "Your weight for your gender and age",
                "lowerLimit" : 0,
                "upperLimit" : bw3,
                "lowerLimitDisplay" : "Under weight",
                "middleLimitDisplay" : "Normal weight",
                "upperLimitDisplay" : "Over weight",
                "showValue" : "1",
                "valueBelowPivot" : "1",
                "theme" : "fint",
                showGaugeBorder : "1"
            },
            "colorRange" : {
                "color" : [{
                    "minValue" : 0,
                    "maxValue" : bw1,
                    "code" : "#e44a00"
                }, {
                    "minValue" : bw1,
                    "maxValue" : bw2,
                    "code" : "#00CC00"
                }, {
                    "minValue" : bw2,
                    "maxValue" : bw3,
                    "code" : "#f8bd19"
                }]
            },
            "dials" : {
                "dial" : [{
                    "value" : bw
                }]
            }
        }
    });
    fusioncharts.render();

Answer 1

@Shanthi 您可以使用 Angular Gauge of FusionCharts 的 'trend points' 功能来实现您的要求。

Here 是满足您要求的工作示例。

<!-- A simple angular gauge showing customer satisfaction index for Harry's Supermart. 

Elements :
1. Color Range (Radial scale)
2. Dials (Data Value Indicators)
3. Tick Marks & Values
4. Tooltip
5. Trend points, trend arcs & trend markers
6. Annotations

-->
<div id="chart-container">FusionCharts will render here</div>

如果您还有其他疑虑，请告诉我。

如何将刻度盘设置为 angular 仪表融合图中输入的值

How to set dials to values given as input in angular gauge fusion chart

javascript

angularjs

fusioncharts