Browse Source

Add style option for data points.

Note that this ought to be renamed to be consistent with other style options but currently 'style' is used to define the shape of the point.
v3_develop
Chris Jackson 10 years ago
parent
commit
4e6c5a51af
2 changed files with 46 additions and 4 deletions
  1. +41
    -2
      examples/graph2d/17_dynamicStyling.html
  2. +5
    -2
      lib/DOMutil.js

+ 41
- 2
examples/graph2d/17_dynamicStyling.html View File

@ -110,6 +110,42 @@
</select> </select>
</td> </td>
</tr> </tr>
<tr>
<td>Points Color</td>
<td>
<select id="pointcolor" onchange="updateStyle()">
<option value="stroke:green;">green</option>
<option value="stroke:red;">red</option>
<option value="stroke:blue;" selected="selected">blue</option>
<option value="stroke:black;">black</option>
</select>
</td>
</tr>
<tr>
<td>Point line thickness</td>
<td>
<select id="pointthickness" onchange="updateStyle()">
<option value="stroke-width:0;">0</option>
<option value="stroke-width:1;">1</option>
<option value="stroke-width:2;" selected="selected">2</option>
<option value="stroke-width:3;">3</option>
<option value="stroke-width:4;">4</option>
<option value="stroke-width:5;">5</option>
<option value="stroke-width:6;">6</option>
</select>
</td>
<tr>
</tr>
<td>Points Fill Color</td>
<td>
<select id="pointfill" onchange="updateStyle()">
<option value="fill:green;">green</option>
<option value="fill:red;">red</option>
<option value="fill:blue;" selected="selected">blue</option>
<option value="fill:black;">black</option>
</select>
</td>
</tr>
</table> </table>
</td> </td>
</tr> </tr>
@ -135,8 +171,7 @@
dataAxis: { dataAxis: {
showMinorLabels: false, showMinorLabels: false,
icons: true icons: true
},
legend: {left: {position: "top-left"}}
}
}; };
var groupData = { var groupData = {
@ -165,7 +200,11 @@
groupData.style += document.getElementById("thickness").value; groupData.style += document.getElementById("thickness").value;
groupData.options.drawPoints = {}; groupData.options.drawPoints = {};
groupData.options.drawPoints.styles = "";
groupData.options.drawPoints.style = document.getElementById("points").value; groupData.options.drawPoints.style = document.getElementById("points").value;
groupData.options.drawPoints.styles += document.getElementById("pointcolor").value;
groupData.options.drawPoints.styles += document.getElementById("pointthickness").value;
groupData.options.drawPoints.styles += document.getElementById("pointfill").value;
groupData.options.drawPoints.size = Number(document.getElementById("pointsize").value); groupData.options.drawPoints.size = Number(document.getElementById("pointsize").value);
if (groupData.options.drawPoints.style == "") { if (groupData.options.drawPoints.style == "") {
groupData.options.drawPoints = false; groupData.options.drawPoints = false;

+ 5
- 2
lib/DOMutil.js View File

@ -139,7 +139,6 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
point.setAttributeNS(null, "cx", x); point.setAttributeNS(null, "cx", x);
point.setAttributeNS(null, "cy", y); point.setAttributeNS(null, "cy", y);
point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size); point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
point.setAttributeNS(null, "class", group.className + " point");
} }
else { else {
point = exports.getSVGElement('rect',JSONcontainer,svgContainer); point = exports.getSVGElement('rect',JSONcontainer,svgContainer);
@ -147,8 +146,12 @@ exports.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size); point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
point.setAttributeNS(null, "width", group.options.drawPoints.size); point.setAttributeNS(null, "width", group.options.drawPoints.size);
point.setAttributeNS(null, "height", group.options.drawPoints.size); point.setAttributeNS(null, "height", group.options.drawPoints.size);
point.setAttributeNS(null, "class", group.className + " point");
} }
if(group.options.drawPoints.styles !== undefined) {
point.setAttributeNS(null, "style", group.group.options.drawPoints.styles);
}
point.setAttributeNS(null, "class", group.className + " point");
return point; return point;
}; };

Loading…
Cancel
Save