Question

我正在进行数据可视化，其上有几个C3图表。其中一个是应该使用我在线提取的JSON文件动态更新的一对仪表。我的问题是，仪表值在更新时重叠，即当它读取65的读数时，前一个值0仍然存在。

我使用的是C3js版本0.4.7。

我的代码如下。请帮忙：

var gauge = c3.generate({
                bindto: d3.select('div#MeterGauge'),
                data: {
                        url: 'data/data.json',
                        mimeType: 'json',
                        type: 'gauge'
                },
                gauge: {
                //        label: 'One Value',
                //        min: 0,
                //        max: 100,
                //        units: '%',
                //        width: 50
                },
                color: {
                        pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values.
                        threshold: {
        //            unit: 'value', // percentage is default
        //            max: 200, // 100 is default
                                values: [30, 60, 90, 100]
                                }
                },
                size: {
                        height: 200
                }
        });
        setTimeout(function () {
                gauge.load({
                        url: 'data/data.json',
                        mimeType: 'json',
                        keys: {
                                value: ['Another Value']
                        }
                });
        }, 2000);;

Answer 1

我能够使用相同版本的c3js并让Gauge为XHR请求工作，请参考jsfiddle中的工作代码： -

var gauge = c3.generate({
            bindto: d3.select('div#MeterGauge'),
            //data: {
            //        url: 'data/data.json',
            //        mimeType: 'json',
            //        type: 'gauge'
            //},
            data: {
                columns: [
                    ['data', 91.4]
                ],
                type: 'gauge',
                onclick: function (d, i) { console.log("onclick", d, i);},
                onmouseover: function (d, i) { console.log("onmouseover", d, i);},
                onmouseout: function (d, i) { console.log("onmouseout", d, i); }
            },
            gauge: {
            //        label: 'One Value',
            //        min: 0,
            //        max: 100,
            //        units: '%',
            //        width: 50
            },
            color: {
                    pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values.
                    threshold: {
    //            unit: 'value', // percentage is default
    //            max: 200, // 100 is default
                            values: [30, 60, 90, 100]
                            }
            },
            size: {
                    height: 200
            }
    });
    setTimeout(function () {
        gauge.load({
            columns: [['data', 10]]
        });
    }, 1000);

    //setTimeout(function () {
    //        gauge.load({
    //                url: 'data/data.json',
    //                mimeType: 'json',
    //                keys: {
    //                        value: ['Another Value']
    //                }
    //        });
    //}, 2000);


new Request.JSON({
  url: '/echo/json/',
  data: {
    json: JSON.encode({
        text: 'some text',
        array: [1, 2, 'three'],
        object: {
            par1: 'another text',
            par2: [3, 2, 'one'],
            par3: {}
        },
        percent: 44.8
    }),
    delay: 3
  },
  onSuccess: function(response) {
    update_gauge(response, $('post'));
  }
}).send();

var update_gauge = function(obj, result) {
   console.log('response '+obj.percent);
   gauge.load({
     columns: [['data', obj.percent]]
   });
};

http://jsfiddle.net/chetanbh/Lxkhzfv0/11/

请提供或分叉并修改以上小提琴以提供错误代码。

C3js规格值重叠

1 个答案: