json_file :(命名数据/ instances_in_versions_data,没有扩展名)
{
"identifier": "value",
"items": [
{"version": "18.2.0.0-b130-int", "value": "1", "okcs_instances": "2", "fusion_instances": "1"},
{"version": "18.2.0.0-b112", "value": "2", "okcs_instances": "3", "fusion_instances": "1"},
{"version": "18.2.0.0-b100", "value": "3", "okcs_instances": "2", "fusion_instances": "0"},
{"version": "17.11.0.0-b380", "value": "4", "okcs_instances": "0", "fusion_instances": "0"},
{"version": "17.11.0.0-b372", "value": "5", "okcs_instances": "0", "fusion_instances": "2"},
{"version": "17.8.2.0-b6", "value": "6", "okcs_instances": "2", "fusion_instances": "2"},
{"version": "17.8.0.0-b22", "value": "7", "okcs_instances": "1", "fusion_instances": "6"},
{"version": "17.2.5.0-b4", "value": "8", "okcs_instances": "3", "fusion_instances": "2"},
{"version": "16.11.0.0-b354", "value": "9", "okcs_instances": "1", "fusion_instances": "2"}
]
}
js code:
require([
"dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/plot2d/Columns",
"dojox/charting/action2d/Tooltip",
"dojo/ready",
"dojox/charting/widget/SelectableLegend",
"dojo/dom-construct",
"dojo/text!data/instances_in_versions_data",
"dojo/json",
"dojo/data/ItemFileReadStore"],
function(
Chart, Lines,
Default,
StackedColumns,
Columns,
Tooltip,
ready,
SelectableLegend,
domConstruct,
text_content_from_file,
JSON,
item_file_store) {
ready(function() {
// identify the element in which you want to place the chart
var div_for_chart = document.getElementById('widget11_instances_in_versions_chart');
// create chart object in the specified html element object
var instances_in_versions_chart = new Chart(div_for_chart);
var string_content = JSON.stringify(text_content_from_file)
var json_parsed_data = JSON.parse(string_content, true)
array_values = [];
array_versions = [];
array_okcs_instances = [];
array_fusion_instances = [];
json_data_store = new dojo.data.ItemFileReadStore({data: string_content});
alert(json_parsed_data);
// identity: "value",
// query: {value: "*"},
json_data_store.fetch({
query: {value: "1"},
onItem: function(item, request) {
alert("blank");
alert("value: "+json_data_store.getValue(item, "value"))
array_values.push(json_data_store.getValue(item, "value"));
array_versions.push(json_data_store.getValue(item, "version"));
array_okcs_instances.push(json_data_store.getValue(item, "okcs_instances"));
array_fusion_instances.push(json_data_store.getValue(item, "fusion_instances"));
alert("value: " +json_data_store.getValue(item, "value") + "\n"
+ "version: " +json_data_store.getValue(item, "version") + "\n"
+ "okcs_instances: " +json_data_store.getValue(item, "okcs_instances") + "\n"
+ "fusion_instances: " +json_data_store.getValue(item, "fusion_instances") + "\n");
}
});
// alert("array_values: " + array_values + "\n" +
// "array_versions: " + array_versions + "\n" +
// "array_okcs_instances: " + array_okcs_instances + "\n" +
// "array_fusion_instances: " + array_fusion_instances
// );
instances_in_versions_chart.addPlot("stackedColumnsPlot", {
type: StackedColumns,
lines: true,
areas: true,
markers: true,
gap: 5,
labels: true,
labelStyle:"outside",
tension: "S"
});
instances_in_versions_chart.addAxis("x", {
majorTicks:true,
majorTickStep:1,
minorTicks:true,
rotation: -30,
labels: array_versions
});
instances_in_versions_chart.addAxis("y", {
vertical: true
});
instances_in_versions_chart.addSeries("OKCS Instances", array_okcs_instances, {
plot: "stackedColumnsPlot",
stroke: {
color: "blue"
},
fill: "lightblue"
});
instances_in_versions_chart.addSeries("Fusion Instances", array_okcs_instances, {
plot: "stackedColumnsPlot",
stroke: {
color: "green"
},
fill: "lightgreen"
});
new Tooltip(instances_in_versions_chart, "stackedColumnsPlot", {
text: function(chartItem) {
console.debug(chartItem);
return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y;
}
});
instances_in_versions_chart.render();
new SelectableLegend({
chart: instances_in_versions_chart,
horizontal: false
}, "widget11_instances_in_versions_chart_legend");
});
});
HTML文件:
<div id="widget11_instances_in_versions_chart" style="width: 500px; height: 350px;padding-top: 10px;"></div>
它没有物品。因此,没有数据可以呈现图表。