Highcharts温度计

Question

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

我是否忽略了这样做的一种方法，或者只是在Highcharts的曲目中遗漏了它？来自Highcharts的任何人愿意发表评论吗？

Answer 1

但听起来我在这一点上不太走运，对于一个现有形状的如此简单的修改来说，这是一种遗憾。

不要这么容易就放弃。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();         
    });
}); 

Answer 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();   

});

})；