【问题标题】:dimple.js scatterplot duplicating axis lablesdimple.js 散点图复制轴标签
【发布时间】:2015-06-10 23:31:25
【问题描述】:

使用dimple.js,我用下面的代码渲染了一个散点图。这很好用,但是当我将鼠标悬停在任何点上时,x 和 y 值会显示两次,一次以小数显示,低于以百分比显示。我怎样才能简单地将百分比 x,y 值保留在悬停弹出窗口中?另外,有没有办法在悬停弹出窗口中显示其他项目?
这是引发问题的小提琴:http://jsfiddle.net/dizzy0ny/ch2187dd/52/

var svg = dimple.newSvg("#chartContainer", 600,600);
var myChart = new dimple.chart(svg);
myChart.setBounds(90, 35, 480, 400)
xAxis = myChart.addMeasureAxis("x", "x");
yAxis = myChart.addMeasureAxis("y", "y");
xAxis.showGridlines = true;
xAxis.tickFormat = '.1%'
yAxis.tickFormat = '.1%'
s1 = myChart.addSeries(["x","y","group"], dimple.plot.bubble, [xAxis, yAxis]);
s1.data = data_scatter

s2 = myChart.addSeries(["y","group"], dimple.plot.line, [xAxis, yAxis]);
s2.data = data_ser1      

myChart.addLegend(90, 480, 330, 20, "left");
myChart.draw();

【问题讨论】:

    标签: javascript d3.js data-visualization dimple.js


    【解决方案1】:

    根据此处的文档:http://dimplejs.org/adhoc_viewer.html?id=adhoc_bar_custom_tooltips

    您可以像这样更改默认工具提示:

    s1.getTooltipText = function (e) {
        return [
            "This is a custom tooltip!",
            "X value: %" + (e.aggField[0]*100).toFixed(2), 
            "Y value: %" + (e.aggField[1]*100).toFixed(2),
            "Group: " + e.aggField[2]
        ];
    };
    

    在此处查看您更新的小提琴:http://jsfiddle.net/ch2187dd/55/

    另外,尽量不要忘记那些分号! :)

    【讨论】:

    • 这可能只是因为它通常会向您显示该值以及该值的百分比。但是,由于您提供的值已经是百分比,因此它只会显示两次相同的数据,除非您使用提供的代码对其进行自定义。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-08-24
    • 1970-01-01
    • 1970-01-01
    • 2021-06-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多