使用 C3.JS 调整仪表图的缩放比例答案

【问题标题】：Adjusting the scaling of gauge charts using C3.JS使用 C3.JS 调整仪表图的缩放比例
【发布时间】：2014-09-03 20:15:47
【问题描述】：

我正在尝试调整 C3 仪表图的缩放比例，使最小值为 50，最大值为 100，传入的值为 75。在我的心智模型中，这应该使弧从左侧的一半（从 50-75）。但是，弧线反而出现在中间，计算出来的值是 50？我假设该值为 50，因为 75 介于 50-100 之间，但我不知道如何使弧正确显示。

http://jsfiddle.net/8o4mqjf4/

我认为弧线应该从左边一直到中间。

var chart = c3.generate({
    bindto: "#gauge",
    data: {
        columns: [
            ['data', 75.0]
        ],
        type: 'gauge',
    },
    gauge: {
        min: 50,
        max: 100
    },
    color: {

    }
});

【问题讨论】：

你能给你的“心智模型”做一张照片吗？只是一些非常简单的事情，以便我了解您的需求。（例如尝试onemotion.com/flash/sketch-paint）。

标签： javascript charts c3.js

【解决方案1】：

你的心智模型是正确的。仪表不会像您期望的那样显示，因为它默认显示一个比率。使用标签和格式选项来显示值：

var chart = c3.generate({
    bindto: "#gauge",
    data: {
        columns: [
            ['data', 75.0]
        ],
        type: 'gauge',
    },
    gauge: {
        label: {
            format: function(value, ratio) {
                return value;
            }
        },
        min: 50,
        max: 100
    },
    color: {

    }
});

【讨论】：