Question

我想使用amCharts创建时钟/仪表图表。 amCharts提供了一个按照要求绘制图表的工具，但我仍然面临着创建图表的问题。我使用以下链接绘制图表： https://live.amcharts.com/new/edit/

我需要类似下图的图表。

此图的功能如下

最小值为-3，最大值为3
两者必须可见
只能看到-3,0和3。除此之外。

我将非常感谢你。

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

使用＆＃39; JQWidgets＆＃39;

，而不是使用amCharts

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

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

使用amCharts创建仪表图表

2 个答案: