我的數據沒有填充在雙軸的凹坑圖表中。我想說明的雙軸酒窩

Question

var svg = dimple.newSvg("#chartContainer", 990, 400);  

d3.json("http://localhost:8082/charts/dashboard/index", function (data) { 
    data = dimple.filterData(data, "monthYear", [ 
                "Jan-2015", "Feb-2015", "Mar-2015", "Apr-2015", "May-2015", "Jun-2015", 
                "Jul-2015", "Aug-2015", "Sep-2015", "Oct-2015", "Nov-2015", "Dec-2015" 
               ]);          

      //console.log(data); 
//Create the indicator chart on the right of the main chart 
var indicator = new dimple.chart(svg, data); 
//Pick blue as the default and orange for the selected month 
var defaultColor = indicator.defaultColors[0]; 
var indicatorColor = indicator.defaultColors[2]; 
//The frame duration for the animation in milliseconds 
var frame = 2000; 

var firstTick = true; 
//Place the indicator bar chart to the right 
indicator.setBounds(800, 49, 153, 311); 
//Add dates along the y axis 
var y = indicator.addCategoryAxis("y", "monthYear"); 
y.addOrderRule("Date", "Asc"); 

// Use sales for bar size and hide the axis 
var x = indicator.addMeasureAxis("x", "energyConsumption"); 
x.hidden = true; 
//Add the bars to the indicator and add event handlers 
var s = indicator.addSeries(null, dimple.plot.bar); 
s.addEventHandler("click", onClick); 
// Draw the side chart 
indicator.draw(); 
//Remove the title from the y axis 
y.titleShape.remove(); 

// Remove the lines from the y axis 
y.shapes.selectAll("line,path").remove(); 

// Move the y axis text inside the plot area 
y.shapes.selectAll("text") 
     .style("text-anchor", "start") 
     .style("font-size", "11px") 
     .attr("transform", "translate(18, 0.5)");   

// Manually set the bar colors 
s.shapes 
     .attr("rx", 10) 
     .attr("ry", 10) 
     .style("fill", function (d) { return (d.y === 'Jan-2015' ? indicatorColor.fill : defaultColor.fill) }) 
     .style("stroke", function (d) { return (d.y === 'Jan-2015' ? indicatorColor.stroke : defaultColor.stroke) }) 
     .style("opacity", 0.4); 

//draw the main chart 
//this is the main chart for dual axis. 

var chart = new dimple.chart(svg, data); 
chart.setBounds(60,20,680,330); 

// Add your x axis - nothing unusual here 
var x = chart.addMeasureAxis("x", "Date"); 
// First y axis is the combination axis for revenue and profit 
var y1 = chart.addMeasureAxis("y", "Temperature"); 
// Second is the units only 
var y2 = chart.addMeasureAxis("y", "Energy Consumption"); 

var bars = chart.addSeries("Energy Comsuption", dimple.plot.bar, [x,y2]); 

var lines = chart.addSeries("Weather Report", dimple.plot.line, [x,y1]); 

bars.barGap = 0.5; 
// Colour the bars manually so they don't overwhelm the lines 
chart.assignColor("Energy Comsuption", "black", "black", 0.15); 
var story = chart.setStoryboard("monthYear", onTick); 
//Change the frame duration 
story.frameDuration = frame; 
// Order the storyboard by date 
story.addOrderRule("Date"); 
//x.dateParseFormat = "%m/%Y"; 
//x.addOrderRule("Date");  

// Here's how you add a legend for just one series. Excluding the last parameter 
// will include every series or an array of series can be passed to select more than 
// one 
//chart.addLegend(60, 5, 680, 10, "right", lines); 

chart.draw(); 
//Orphan the legends as they are consistent but by default they 
// will refresh on tick 
chart.legends = []; 
// Remove the storyboard label because the chart will indicate the 
// current month instead of the label 
story.storyLabel.remove(); 

// On click of the side chart 
function onClick(e) { 
    // Pause the animation 
    story.pauseAnimation(); 
    // If it is already selected resume the animation 
    // otherwise pause and move to the selected month 
    if (e.yValue === story.getFrameValue()) { 
     story.startAnimation(); 
    } else { 
     story.goToFrame(e.yValue); 
     story.pauseAnimation(); 
    } 
} 

// On tick of the main charts storyboard 
function onTick(e) { 
    if (!firstTick) { 
     // Color all shapes the same 
     s.shapes 
       .transition() 
       .duration(frame/2) 
       .style("fill", function (d) { return (d.y === e ? indicatorColor.fill : defaultColor.fill) }) 
       .style("stroke", function (d) { return (d.y === e ? indicatorColor.stroke : defaultColor.stroke) }); 
    } 
    firstTick = false; 
} 
}); 
................... 

我的數據是有點像這樣： -

[{"country":"Australia","state":"New south wales","region":"Sydney", 
"suburbs":"Canterbury-Bankstown","temperature":20.0,"humidity":25.0,"precipitation":11.0,"date":"Jan/01/2015", 
"energyConsumption":0.141,"monthYear":"Jan-2015"}, 
{"country":"Australia","state":"New south wales","region":"Sydney","suburbs":"Canterbury-Bankstown", 
"temperature":20.0,"humidity":25.0,"precipitation":11.0,"date":"Jan/02/2015", 
"energyConsumption":0.088,"monthYear":"Jan-2015"}, 
{"country":"Australia","state":"New south wales","region":"Sydney","suburbs":"Canterbury-Bankstown", 
"temperature":20.0,"humidity":25.0,"precipitation":11.0,"date":"Jan/03/2015", 
"energyConsumption":0.078,"monthYear":"Jan-2015"},{"country":"Australia","state":"New south wales","region":"Sydney","suburbs":"Canterbury-Bankstown", 
"temperature":20.0,"humidity":25.0,"precipitation":11.0,"date":"Jan/04/2015", 
"energyConsumption":0.151,"monthYear":"Jan-2015"},{"country":"Australia","state":"New south wales","region":"Sydney", 
"suburbs":"Canterbury-Bankstown","temperature":20.0,"humidity":25.0,"precipitation":11.0,"date":"Jan/05/2015", 
"energyConsumption":0.146,"monthYear":"Jan-2015"}, 
{"country":"Australia","state":"New south wales","region":"Sydney", 
"suburbs":"Canterbury-Bankstown","temperature":20.0,"humidity":25.0,"precipitation":11.0,"date":"Jan/06/2015", 
"energyConsumption":0.077,"monthYear":"Jan-2015"},{"country":"Australia","state":"New south wales","region":"Sydney", 
"suburbs":"Canterbury-Bankstown","temperature":20.0,"humidity":25.0,"precipitation":11.0, 
"date":"Jan/07/2015","energyConsumption":0.052,"monthYear":"Jan-2015"}, 
{"country":"Australia","state":"New south wales","region":"Sydney","suburbs":"Canterbury-Bankstown","temperature":20.0,"humidity":25.0, 
"precipitation":11.0,"date":"Jan/08/2015","energyConsumption":0.055,"monthYear":"Jan-2015"} 

Answer 1

JSBIN Example

請看一看我與您的數據創建雙Y軸。

有幾件事你做錯了。

var x = chart.addMeasureAxis("x", "Date"); 
// First y axis is the combination axis for revenue and profit 
var y1 = chart.addMeasureAxis("y", "Temperature"); 
// Second is the units only 
var y2 = chart.addMeasureAxis("y", "Energy Consumption"); 

var bars = chart.addSeries("Energy Comsuption", dimple.plot.bar, [x,y2]); 

var lines = chart.addSeries("Weather Report", dimple.plot.line, [x,y1]); 

日期，溫度，能耗，天氣報告。所有這些都是無效的，因爲那不是它如何定義你的數據。您必須提供數據上顯示的確切名稱。

我只爲您創建雙軸，我認爲您可以添加從那裏開始的所有其他細節。如果您有任何其他問題，請隨時發帖