使用 amCharts 创建仪表图

Question

我想使用 amCharts 创建 clock/gauge 图表。 amCharts 提供了一种根据要求绘制图表的工具，但我仍然面临创建图表的问题。我正在使用以下 link 绘制图表： https://live.amcharts.com/new/edit/

我需要类似下图的图表。

这张图的特征如下

最小值为 -3，最大值为 3
两者都必须可见
只有 -3,0 和 3 可见。 none除此之外。

我会非常感谢你的。

Answer 1

您的问题没有详细说明您尝试可视化的内容，屏幕截图中显示的绿色部分令人困惑：它应该代表什么？我怀疑速度计类型的小部件可能不是传达您正在处理的数据的最佳形式。

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

https://output.jsbin.com/mawomeluye

这里是选项配置：

{
    "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"
        }
    ]
}

Answer 2

不使用 amCharts，而是使用 'JQWidgets'

http://www.jqwidgets.com/jquery-widgets-demo/

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

使用 amCharts 创建仪表图

Create gauge chart using amCharts

javascript

charts

amcharts

gauge