Javascript 使用amCharts创建仪表图

Javascript 使用amCharts创建仪表图,javascript,charts,amcharts,gauge,Javascript,Charts,Amcharts,Gauge,我想使用amCharts创建时钟/仪表图表。amCharts提供了一个工具来根据需要绘制图表,但我仍然面临创建图表的问题。我正在使用以下链接绘制图表: 我需要类似下图的图表 此图的特征如下所示 最小值为-3,最大值为3 两者都必须可见 只有-3,0和3可见。正是这样 我将非常感谢您。您的问题缺少您试图可视化的细节,屏幕截图中显示的绿色部分令人困惑:它应该代表什么?我怀疑速度计类型的小部件可能不是传达您正在处理的数据的最佳形式 无论如何,这可以作为基于amCharts的解决方案的起点 以

我想使用amCharts创建时钟/仪表图表。amCharts提供了一个工具来根据需要绘制图表,但我仍然面临创建图表的问题。我正在使用以下链接绘制图表:

我需要类似下图的图表

此图的特征如下所示

  • 最小值为-3,最大值为3
  • 两者都必须可见
  • 只有-3,0和3可见。正是这样

我将非常感谢您。

您的问题缺少您试图可视化的细节,屏幕截图中显示的绿色部分令人困惑:它应该代表什么?我怀疑速度计类型的小部件可能不是传达您正在处理的数据的最佳形式

无论如何,这可以作为基于amCharts的解决方案的起点

以下是选项配置:

{
    "type": "gauge",
    "faceBorderWidth": 8,
    "precision": 1,
    "processCount": 998,
    "arrows": [
        {
            "id": "GaugeArrow-1",
            "innerRadius": -2,
            "nailBorderThickness": 0,
            "radius": "84%",
            "startWidth": 14,
            "value": 0
        }
    ],
    "axes": [
        {
            "axisAlpha": 0,
            "axisThickness": 0,
            "bandAlpha": 0.07,
            "bandOutlineAlpha": 1,
            "bandOutlineThickness": 8,
            "bottomText": "deg",
            "bottomTextFontSize": 0,
            "bottomTextYOffset": -18,
            "endAngle": 90,
            "endValue": 3,
            "gridCount": 1,
            "gridInside": false,
            "id": "GaugeAxis-1",
            "inside": false,
            "labelFrequency": 3,
            "labelOffset": 4,
            "minorTickLength": 0,
            "startAngle": -88,
            "startValue": -3,
            "tickThickness": 0,
            "valueInterval": 1,
            "bands": [
                {
                    "color": "#00CC00",
                    "endValue": 90,
                    "id": "GaugeBand-1",
                    "startValue": 0
                },
                {
                    "color": "#ffac29",
                    "endValue": 130,
                    "id": "GaugeBand-2",
                    "startValue": 90
                },
                {
                    "alpha": 0,
                    "color": "#BBB9B9",
                    "endValue": 220,
                    "id": "GaugeBand-3",
                    "innerRadius": "95%",
                    "startValue": 130
                }
            ]
        }
    ],
    "allLabels": [],
    "balloon": {},
    "titles": [
        {
            "id": "Title-1",
            "size": 14,
            "text": "Measurement"
        }
    ]
} 

使用“JQWidgets”代替amCharts

它提供了各种选项的工作演示和完整的源代码