我有一些气泡和折线图在图表上的几个点重叠。然而,重叠隐藏了另一个点,使视觉混乱。任何人都可以修复这个jsfiddle所以在悬停在重叠点上显示工具提示两个点值。这是jsfiddle:http://jsfiddle.net/d54vY/
var svg = dimple.newSvg("#chartContainer", 590, 400);
// The default data set for these examples has regular times
// and the point of this demo is to show the time axis
// functionality, therefore a small bespoke data set is used.
data = [
{ "Shift":"2012","Date":"12 Jul 2010 10:00","Value":1000 },
{ "Shift":"2012","Date":"20 Jul 2010 10:20","Value":1200 },
{ "Shift":"2012","Date":"1 Aug 2010 10:00","Value":1600 },
{ "Shift":"2012","Date":"8 Aug 2010 10:00","Value":1700 },
{ "Shift":"2013","Date":"12 Jul 2010 10:00","Value":2400 },
{ "Shift":"2013","Date":"20 Jul 2010 10:00","Value":2000 },
{ "Shift":"2013","Date":"1 Aug 2010 10:00","Value":1600 },
{ "Shift":"2013","Date":"8 Aug 2010 10:00","Value":1700 },
];
// Create Separate Date and Time, this allows us to draw them
// on separate axes. Despite the time axis only displaying
// the time portion, the whole date is used so they need to
// have the same date allocated
data.forEach(function (d) {
d["Day"] = d["Date"].substring(0, d["Date"].length - 6);
d["Time of Day"] =
"2000-01-01 " + d["Date"].substring(d["Date"].length - 5);
}, this);
// Create the chart as usual
var myChart = new dimple.chart(svg, data);
myChart.setBounds(70, 40, 490, 320)
// Add the x axis reading dates in the format 01 Jan 2012
// and displaying them 01 Jan
var x = myChart.addTimeAxis("x", "Day", "%d %b %Y", "%d %b");
// Add the y axis reading dates and times but only outputting
// times.
//var y = myChart.addTimeAxis("y", "Time of Day",
// "%Y-%m-%d %H:%M", "%H:%M");
var y = myChart.addMeasureAxis("y", "Value");
// Size the bubbles by volume
var z = myChart.addMeasureAxis("z", "Value");
// Setting min and max dates requires them to be set
// as actual javascript date objects
x.overrideMin = new Date("2010-06-20");
x.overrideMax = new Date("2011-01-02");
//y.overrideMin = new Date("01/01/2000 9:00 am");
//y.overrideMax = new Date("01/01/2000 6:00 pm");
// Show a label for every 4 weeks.
x.timePeriod = d3.time.weeks;
x.timeInterval = 4;
// Control bubble sizes by setting the max and min values
z.overrideMin = 900;
z.overrideMax = 3000;
// Add the bubble series for shift values first so that it is
// drawn behind the lines
myChart.addSeries("Shift", dimple.plot.bubble);
// Add the line series on top of the bubbles. The bubbles
// and line points will naturally fall in the same places
var s = myChart.addSeries("Shift", dimple.plot.line);
// Add line markers to the line because it looks nice
s.lineMarkers = true;
// Show a legend
myChart.addLegend(180, 10, 360, 20, "right");
// Draw everything
myChart.draw();