C# HighCharts仪表从-100%到100%

我试图找出如何定义一个量表，可能是solidgauge类型，介于-100%和100%之间。其中-100%为纯红色，0%为纯黄色，100%为纯绿色。我想让图形从0%开始，然后转到任意一边。我还想让曲线图显示一条直线（比如从中心点反射到曲线弧末端的速度计（但不是必需的）

这将是页面上的静态图形，一旦为页面计算，它将不会被更新，除非页面被刷新

我想我要找的是像固体活动量表这样的东西。但是，我需要两个不同方向的图，我不知道如何定义。我希望量表有一个从0到-90的图，而另一个从0到90。我希望它们有0作为相同的终点和正的值侧面呈渐变绿色，反面呈渐变红色

显示正和负的样本量表

显示积极结果的量表

---

显示负面结果的量表

多亏了一位团队成员，我才有了答案

var gaugeOptions = {

    chart: {
       backgroundColor: 'transparent',
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['71%', '80%'],
        size: '140%',
        startAngle: -90,
        endAngle: 0,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#DDDF0D'], // green
            [0.5, '#DF5353'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2

    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
            enabled:false

            }
        }
    }
};

var gaugeOptions2 = {

    chart: {
       backgroundColor: 'transparent',
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['10%', '85%'],
        size: '140%',
        startAngle: 0,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#DDDF0D'], // green
            [0.5, '#55BF3B'], // yellow
            [0.9, '#55BF3B'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2

    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
            enabled:false

            }
        }
    }
};

var gaugeOptions3 = {

    chart: {
           backgroundColor: 'transparent',
        type: 'solidgauge'

    },

    title: null,

    pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // the value axis
    yAxis: {
        stops: [
            [0.1, '#55BF3B'], // green
            [0.5, '#DDDF0D'], // yellow
            [0.9, '#DF5353'] // red
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },

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

// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 100,
    lineWidth: 0,
    tickPositions: []
    },

    credits: {
        enabled: false
    },

    series: [{

        data: [0],


    }]

}));

// The RPM gauge
var chartRPM = Highcharts.chart('container-rpm', Highcharts.merge(gaugeOptions2, {
    yAxis: {
        min: 0,
        max: 100,
    lineWidth: 0,
    tickPositions: []
    },

    credits: {
        enabled: false
    },

    series: [{
        name: '',
        data: [0],

        tooltip: {
            valueSuffix: ''
        }
    }]

}));


var chartTitle = Highcharts.chart('container-title', Highcharts.merge(gaugeOptions3, {
    yAxis: {
        min: -100,
        max: 100,
        title: {
            text: 'Progress'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'Progress',
        data: [0],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                   '<span style="font-size:12px;color:silver">%</span></div>'
        },
        tooltip: {
            valueSuffix: ' %'
        }
    }]

}));

// Bring life to the dials
setInterval(function () {
    // Speed
    var point,
            point2,
                point3,
        newVal,
        newVal2,
        inc;


        point = chartSpeed.series[0].points[0];
        point2 = chartRPM.series[0].points[0];
        point3 = chartTitle.series[0].points[0];

        inc = Math.round((Math.random() - 0.5) * 100);
      //  newVal = point.y + inc;

        if (inc > 0 ) {
            newVal2 =  inc;
            newVal = 0;
        }else{
            newVal =  inc;
            newVal2 =0;
        }

        point.update(Math.abs(newVal));
    point2.update(newVal2);
     point3.update(inc);

}, 2000);

var计量选项={
图表：{
背景色：“透明”，
类型：“solidgauge”
},
标题：空，
窗格：{
中心：['71%，'80%，]，
大小：“140%”，
startAngle:-90，
端角：0，
背景：{
背景颜色：（Highcharts.theme&&Highcharts.theme.background2）| |'#EEE'，
内半径：“60%”，
外层：“100%”，
形状：“圆弧”
}
},
工具提示：{
已启用：false
},
//价值轴
亚克斯：{
停止：[
[0.1，#DDDF0D']，//绿色
[0.5，#DF5353']，//黄色
[0.9，#DF5353']//红色
],
线宽：0，
minorTickInterval:null，
金额：2
},
打印选项：{
solidgauge：{
数据标签：{
已启用：false
}
}
}
};
var仪表选项2={
图表：{
背景色：“透明”，
类型：“solidgauge”
},
标题：空，
窗格：{
中心：['10%，'85%']，
大小：“140%”，
startAngle:0，
端角：90，
背景：{
背景颜色：（Highcharts.theme&&Highcharts.theme.background2）| |'#EEE'，
内半径：“60%”，
外层：“100%”，
形状：“圆弧”
}
},
工具提示：{
已启用：false
},
//价值轴
亚克斯：{
停止：[
[0.1，#DDDF0D']，//绿色
[0.5，#55BF3B']，//黄色
[0.9，#55BF3B']//红色
],
线宽：0，
minorTickInterval:null，
金额：2
},
打印选项：{
solidgauge：{
数据标签：{
已启用：false
}
}
}
};
var仪表选项3={
图表：{
背景色：“透明”，
类型：“solidgauge”
},
标题：空，
窗格：{
中心：['50%，'85%，]，
大小：“140%”，
startAngle:-90，
端角：90，
背景：{
背景颜色：（Highcharts.theme&&Highcharts.theme.background2）| |'#EEE'，
内半径：“60%”，
外层：“100%”，
形状：“圆弧”
}
},
工具提示：{
已启用：false
},
//价值轴
亚克斯：{
停止：[
[0.1，#55BF3B']，//绿色
[0.5，#DDDF0D']，//黄色
[0.9，#DF5353']//红色
],
线宽：0，
minorTickInterval:null，
金额：2，
标题：{
y:-70
},
标签：{
y:16
}
},
打印选项：{
solidgauge：{
数据标签：{
y:5，
边框宽度：0，
useHTML:true
}
}
}
};
//速度表
var chartSpeed=Highcharts.chart（'container-speed'，Highcharts.merge（计量选项）{
亚克斯：{
分:0,，
最高：100，
线宽：0，
位置：[]
},
学分：{
已启用：false
},
系列：[{
数据：[0]，
}]
}));
//转速计
var chartRPM=Highcharts.chart（'container-rpm'，Highcharts.merge（GaugeOptions 2{
亚克斯：{
分:0,，
最高：100，
线宽：0，
位置：[]
},
学分：{
已启用：false
},
系列：[{
名称：“”，
数据：[0]，
工具提示：{
valueSuffix:'
}
}]
}));
var chartTitle=Highcharts.chart（'container-title'，Highcharts.merge（gaugeOptions3{
亚克斯：{
最低：-100，
最高：100，
标题：{
文本：“进展”
}
},
学分：{
已启用：false
},
系列：[{
名称：'进度'，
数据：[0]，
数据标签：{
格式：“{y}
”+
'%'
},
工具提示：{
值后缀：''
}
}]
}));
//使刻度盘充满活力
setInterval（函数（）{
//速度
var point，
第2点，
第3点，
纽瓦尔，
纽瓦尔2号，
股份有限公司；
点=图表速度。系列[0]。点[0]；
point2=chartRPM.series[0]。points[0]；
point3=chartTitle.series[0]。points[0]；
inc=数学圆（（数学随机数（）-0.5）*100）；
//newVal=点y+inc；
如果（inc>0）{
newVal2=inc；
newVal=0；
}否则{
纽瓦尔公司；
newVal2=0；
}
更新点（Math.abs（newVal））；
第2点：更新（newVal2）；
第3点：更新（公司）；
}, 2000);

---

到目前为止，您尝试了什么？能否添加highcharts代码？