Highcharts - 温度计答案

【问题标题】：Highcharts - temperature gaugeHighcharts - 温度计
【发布时间】：2015-01-31 06:02:55
【问题描述】：

我目前可以看到的 Highcharts 的一个缺点是，它的仪表库中似乎没有任何类似于温度计的东西。我可以看到你可能可以摆弄一些东西，但使用例如 1 列条形图或类似的东西，但这并没有真正开始看起来像一个温度计，即底部有一个颜色填充灯泡，甚至是一个圆形底座.

我是否忽略了这样做的方法，还是只是在 Highcharts 曲目中缺少它？请来自 Highcharts 的人愿意发表评论吗？

【问题讨论】：

我知道它看起来不像水银温度计，但角度计能起到同样的作用吗？ highcharts.com/demo/gauge-speedometer
感谢您的建议，但不——我真的不认为普通表盘是合适的替代品。温度计是呈现温度数据的标志性方式，尤其是对多面手的观众。 RGraph 和 FusionCharts 等替代品确实具有真正的温度计图形/仪表，这似乎真的很可惜，但 Highcharts 没有 AFAICS。
也许是这个的修改版？ stackoverflow.com/questions/17564548/gauge-like-high-chart
再次感谢，但我认为这在对数据通信能力的关键测试中失败了。如果您想从视觉上向普通观众展示温度值，那么对他们来说立即有意义的一个图形元素将是温度计，即一个垂直的“进度条”，因为需要一个带有彩色的更好的术语底部的灯泡，或者至少是一个弧形或半圆来关闭底部的元素。但这听起来确实让我对 Highcharts 不太走运，对现有形状进行如此简单的修改真是太可惜了。
我一直在寻找相同的仪表，以便可以将其用于排行榜。它有一个正在努力实现的目标。 jsfiddle.net/crh225/10vkkgdj/2

标签： highcharts temperature

【解决方案1】：

但这听起来确实让我不走运关于这个的Highcharts，对这样一个简单的修改感到遗憾现有形状。

不要轻易放弃。 Highcharts 是一种工具；如果它不能完全按照您想要的方式开箱即用，请自己动手。这就是成为一名优秀的软件开发人员的全部意义所在。

例如，这个fiddle 用 36 行代码将温度计的 SVG 图像与柱形图组合在一起。它需要一些润色，但希望它能让你继续前进。

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column',
                marginBottom: 53
            },
            credits: {
                enabled: false
            },
            title: null,
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false   
            },
            yAxis: {
                min: 0,
                max: 100,
                title: null,
                align: 'right'
            },
            xAxis: {
                labels: false
            },
            series: [{
                data: [60],
                color: 'red'
             }]
        }, function(chart) { // on complete

        chart.renderer.image('http://www.clker.com/cliparts/p/W/e/k/U/d/blank-fundraising-thermometer.svg', 0, 0, 256, 400)
            .add();         
    });
});

【讨论】：

【解决方案2】：

我修好了，see this fiddle.

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column',
            marginBottom: 72
        },
        credits: {
            enabled: false
        },
        title: null,
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false   
        },
        yAxis: {
            min: 0,
            max: 100,
            title: null,
            align: 'right'
        },
        xAxis: {
            labels: false
        },
        series: [{
            data: [54],
            color: '#c00'
         }]
    }, function(chart) { // on complete

    chart.renderer.image('http://www.clker.com/cliparts/p/W/e/k/U/d/blank-fundraising-thermometer.svg',24, 0, 110, 510).add();   

});

});

【讨论】：

您能否在您的回答中说明您修复的旧答案到底有什么问题？