当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Aligning multiple dojox charts on one page

问题描述:

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.

分享给朋友:
您可能感兴趣的文章:
随机阅读: