JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<div id="column_chart" style="width: 600px; height: 400px; margin-top: 20px;"></div>
JavaScript
require([
"dojox/charting/Chart",
"dojox/charting/axis2d/Default",
"dojox/charting/themes/Wetland",
"dojo/ready",
"dojox/charting/plot2d/Lines",
"dojox/charting/plot2d/Columns",
"dojox/charting/plot2d/Pie"
], function(Chart, Default, Wetland, ready, Line) {
"use strict";
ready(function() {
var dataCount = 20,
data = {
line: buildData(dataCount),
column: buildData(dataCount)
};
drawColumn(data.column, data.line);
});
function drawColumn(columnData, lineData) {
var chart = new Chart("column_chart");
chart.addPlot("default", {type: "Columns", markers: true, gap: 5}).
addAxis("x").
addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major"}).
addSeries("month_data", columnData);
chart.addPlot("line", {type: Line, markers: true}).
addSeries("line_data", lineData, {plot: "line"});
bindClickEvent(chart, "default");
bindClickEvent(chart, "line")
chart.render();
}
function buildData(count) {
var result = [];
for(var i = 0; i < count; i++) {
result.push(Math.random() * count + 1);
}
return result;
}
function bindClickEvent(target, plot) {
target.connectToPlot(plot, function(evt) {
if (evt.type === "onclick") {
alert("点击的是 => " + evt.run.data[evt.index]);
}
});
}
});