使用D3自定义更新C3图表中onclick / onmouseover事件的数据标签

时间:2014-10-14 06:09:15

标签: d3.js

我正在尝试在区域图表上更新onclick或onmouseover上的数据标签。当我将鼠标悬停在区域块上时,应更改日期标签(销毁它们并重新创建它们)。有没有选择在c3中做到这一点

这是小提琴:http://jsfiddle.net/sushruthreddygade/2Loc3org

以下是使用C3图表的代码:

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01', '2014-07-01'],
            ['data1', 190, 200, 190],
            ['data2', null,null,130, 130, 140],
            ['data3', null,null,null,null, 10, 20, 40]
        ],
            types: {
            'data1' : 'area-spline',
            'data2' : 'area-spline',
            'data3' : 'area-spline'
        },
        labels: {
                format: function (value, id) {
                    if (value === null) {
                        return ' ';
                    }
                    return value;
                }
          }, 
        onmouseover: function (d, i) { },
        onmouseout: function (d, i) {},
        onclick: function (d, i) {
            alert('On click');
        },
    },
    tooltip: {
                    show: false
    },
    axis: {
        x: {
            type: 'categorized'
        }
    },
});

使用c3 / d3图表对解决方案提出任何建议/指导都会非常有帮助。

谢谢, Sush

0 个答案:

没有答案