问题描述:

I have a web page with three dojox.charts. Each chart has two sets of axes because it is plotting two time-series with different y-values (but scaled similarly). The three charts are meant to show the same range of time. My problem is that the charts do not align properly with respect to each other on the page because of the y-axis labeling. See below screen shot:

Screen Shot

My question is whether I can align these (both left and right edges) without having to remove the axis labels, and if that is possible, how?

This is the relevant javascript that creates the charts:

require([

'dojo/ready',

'dojox/charting/Chart',

'dojox/charting/themes/Claro',

'dojox/charting/plot2d/Lines',

'dojox/charting/axis2d/Default'

], function(ready, Chart, Claro) {

ready(function() {

// set the background color to white

var chart_theme = Claro;

chart_theme.chart.stroke = "white";

chart_theme.chart.fill = "white";

chart_theme.plotarea.fill = "white";

var window_sec = update_period * (len - 1) / 1000; // update_period in msec

var the_labels = [{value: 0, text: (window_sec + " sec ago")}, {value: 1, text: "0"}];

var dec_labels = [{value: 0, text: "No"}, {value: 1, text: "Yes"}];

var part_labels = [{value: 0, text: "0 %"}, {value: 1, text: "100 %"}];

// perf_chart

perf_chart = new Chart('perf_chart');

perf_chart.setTheme(chart_theme);

perf_chart.addPlot('default', { type: 'Lines', markers: false });

perf_chart.addAxis('x', { type: 'Invisible', fixLower: 'none', fixUpper: 'none' });

perf_chart.addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major', min: 0, max: 0.5, minorTicks: 'false', title: "Perr" });

perf_chart.addPlot('other', { type: 'Lines', markers: false, hAxis: 'other_x', vAxis: 'other_y' });

perf_chart.addAxis('other_x', { fixLower: 'major', fixUpper: 'major', min: 0, max: 1, minorTicks: 'false', majorTickStep: 1, labels: the_labels });

perf_chart.addAxis('other_y', { type: 'Invisible', vertical: true, fixLower: 'major', fixUpper: 'major', min: 0, max: 0.5, minorTicks: 'false' });

// dec_chart

dec_chart = new Chart('dec_chart');

dec_chart.setTheme(chart_theme);

dec_chart.addPlot('default', { type: 'Lines', markers: false });

dec_chart.addAxis('x', { type: 'Invisible', fixLower: 'none', fixUpper: 'none' });

dec_chart.addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major', min: 0, max: 1, labels: dec_labels });

dec_chart.addPlot('other', { type: 'Lines', markers: false, hAxis: 'other_x', vAxis: 'other_y' });

dec_chart.addAxis('other_x', { fixLower: 'major', fixUpper: 'major', min: 0, max: 1, minorTicks: 'false', majorTickStep: 1, labels: the_labels });

dec_chart.addAxis('other_y', { type: 'Invisible', vertical: true, fixLower: 'major', fixUpper: 'major', min: 0, max: 0.5, minorTicks: 'false' });

// part_chart

part_chart = new Chart('part_chart');

part_chart.setTheme(chart_theme);

part_chart.addPlot('default', { type: 'Lines', markers: false });

part_chart.addAxis('x', { type: 'Invisible', fixLower: 'none', fixUpper: 'none' });

part_chart.addAxis('y', { vertical: true, fixLower: 'major', fixUpper: 'major', min: 0, max: 1, labels: part_labels });

part_chart.addPlot('other', { type: 'Lines', markers: false, hAxis: 'other_x', vAxis: 'other_y' });

part_chart.addAxis('other_x', { fixLower: 'major', fixUpper: 'major', min: 0, max: 1, minorTicks: 'false', majorTickStep: 1, labels: the_labels });

part_chart.addAxis('other_y', { type: 'Invisible', vertical: true, fixLower: 'major', fixUpper: 'major', min: 0, max: 0.5, minorTicks: 'false' });

reset_chart(perf_chart, dec_chart, part_chart);

perf_chart.render();

dec_chart.render();

part_chart.render();

});

});

and the relevant html:

 <div dojoType="dijit.layout.ContentPane" title="Monitor Query" id="monitor_query_tab">

<div data-dojo-type="ActiveQueryReadStore" data-dojo-id="store" data-dojo-props="url:'str_service.php', requestMethod:'get'"></div>

<label for="active_query_fs"> Active Queries </label>

<input id="active_query_fs" width="100px" data-dojo-type="dijit.form.FilteringSelect" data-dojo-props="store:store, pageSize:100" searchAttr="uuid"/>

<p></p>

<label for="dec_chart"> Decision History </label>

<div id="dec_chart"></div>

<p></p>

<label for="perf_chart"> Decision Performance </label>

<div id="perf_chart"></div>

<p></p>

<label for="part_chart"> Percent Participation </label>

<div id="part_chart"></div>

<p></p>

<input id="stopButton" type="button" />

</div>

Any guidance is appreciated.

相关阅读:
Top