DevExpress儀表板控件-在條形圖軸標簽上顯示文本

Question

我在DevExpress儀表板控件中有一個條形圖 控件 ， 看起來像這樣

 g text { font-weight: bold !important; } 

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" fill="none" stroke="none" stroke-width="0" class="dxc dxc-chart" style="line-height:normal;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);display:block;overflow:hidden;touch-action:pan-x pan-y pinch-zoom;-ms-touch-action:pan-x pan-y pinch-zoom;" width="798" height="516" onclick="void(0)" direction="ltr"> <defs> <clipPath id="DevExpress_14"> <rect x="22" y="10" width="754" height="484" transform="translate(0,0)"></rect> </clipPath> <pattern id="DevExpress_15" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_16" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_17" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_18" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_19" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_20" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_21" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_22" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_23" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_24" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_25" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_26" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_27" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.75"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <pattern id="DevExpress_28" width="6" height="6" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="6" height="6" transform="translate(0,0)" fill="rgb(95,139,149)" opacity="0.5"></rect> <path d="M 3 -3 L -3 3 M 0 6 L 6 0 M 9 3 L 3 9" stroke-width="2" stroke="rgb(95,139,149)" transform="translate(0,0)"></path> </pattern> <clipPath id="DevExpress_29"> <rect x="87" y="10" width="689" height="458" transform="translate(0,0)"></rect> </clipPath> <clipPath id="DevExpress_30"> <rect x="87" y="10" width="689" height="458" transform="translate(0,0)"></rect> </clipPath> </defs> <rect x="22" y="10" width="754" height="484" transform="translate(0,0)" fill="gray" opacity="0.0001"></rect> <g class="dxc-background"></g> <g class="dxc-strips-group"> <g class="dxc-arg-strips" clip-path="url(#DevExpress_29)"></g> <g class="dxc-val-strips" clip-path="url(#DevExpress_29)"></g> </g> <g class="dxc-grids-group"> <g class="dxc-val-grid"> <path d="M 87 431 L 776 431" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 395 L 776 395" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 358 L 776 358" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 321 L 776 321" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 285 L 776 285" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 248 L 776 248" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 212 L 776 212" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 175 L 776 175" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 138 L 776 138" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 102 L 776 102" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 65 L 776 65" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> <path d="M 87 28 L 776 28" transform="translate(0,0.5)" stroke="#d3d3d3" stroke-width="1"></path> </g> <g class="dxc-arg-grid"></g> </g> <g class="dxc-axes-group"> <g class="dxc-arg-axis" clip-path="url(#DevExpress_14)"> <g class="dxc-arg-elements"> <text x="136" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 1</text> <text x="235" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 2</text> <text x="333" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 3</text> <text x="432" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 4</text> <text x="530" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 5</text> <text x="628" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 6</text> <text x="727" y="491" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="middle">Bar 7</text> </g> <g class="dxc-arg-line"> <path d="M 87 468 L 776 468" transform="translate(0,0.5)" stroke-width="1" stroke="#d3d3d3"></path> </g> <g class="dxc-arg-title"></g> </g> <g class="dxc-val-axis" clip-path="url(#DevExpress_14)"> <g class="dxc-val-elements"> <text x="77" y="473" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">0K</text> <text x="77" y="436" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">10K</text> <text x="77" y="400" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">20K</text> <text x="77" y="363" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">30K</text> <text x="77" y="326" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">40K</text> <text x="77" y="290" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">50K</text> <text x="77" y="253" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">60K</text> <text x="77" y="217" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">70K</text> <text x="77" y="180" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">80K</text> <text x="77" y="143" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">90K</text> <text x="77" y="107" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">100K</text> <text x="77" y="70" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">110K</text> <text x="77" y="33" transform="translate(0,0)" style="fill:#767676;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;" text-anchor="end">120K</text> </g> <g class="dxc-val-line"> <path d="M 87 468 L 87 10" transform="translate(0.5,0)" stroke-width="1" stroke="#d3d3d3"></path> </g> <g class="dxc-val-title"> <text x="40" y="239" transform="translate(0,0) rotate(270,40,239)" style="fill:#767676;font-size:16px;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;cursor:default;" text-anchor="middle">Y Axis Title</text> </g> </g> </g> <g class="dxc-constant-lines-group"> <g class="dxc-arg-constant-lines"></g> <g class="dxc-val-constant-lines"></g> </g> <g class="dxc-strips-labels-group"> <g class="dxc-arg-axis-labels"></g> <g class="dxc-val-axis-labels"></g> </g> <g class="dxc-border"> <path d="M 87.5 10.5 L 775.5 10.5 L 775.5 467.5 L 87.5 467.5 L 87.5 10.5 Z" transform="translate(0,0)" fill="none" stroke="#d3d3d3" stroke-width="1" stroke-linecap="square"></path> </g> <g class="dxc-series-group"> <g class="dxc-series"> <g fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0" class="dxc-markers" opacity="1" clip-path="" transform="translate(0,0) scale(1,1)"> <rect x="101" y="346" width="69" height="122" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> <rect x="200" y="402" width="69" height="66" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> <rect x="298" y="440" width="69" height="28" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> <rect x="397" y="75" width="69" height="393" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> <rect x="495" y="107" width="69" height="361" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> <rect x="593" y="220" width="69" height="248" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> <rect x="692" y="360" width="69" height="108" transform="translate(0,0)" rx="0" ry="0" fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0"></rect> </g> </g> <g class="dxc-series"> <g class="dxc-elements" stroke="rgb(95,139,149)" stroke-width="2" clip-path="url(#DevExpress_30)"></g> <g fill="rgb(95,139,149)" stroke="rgb(95,139,149)" stroke-width="0" r="6" visibility="hidden" class="dxc-markers" opacity="0.001" clip-path="url(#DevExpress_30)"></g> </g> </g> <g class="dxc-labels-group"> <g class="dxc-labels" clip-path="url(#DevExpress_30)" opacity="1" transform="translate(0,0)"> <g visibility="visible"> <g transform="translate(115,329)"> <rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$33,200</text> </g> </g> <g visibility="visible"> <g transform="translate(214,385)"> <rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$18,000</text> </g> </g> <g visibility="visible"> <g transform="translate(315,423)"> <rect x="-8" y="-17" width="51" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$7,600</text> </g> </g> <g visibility="visible"> <g transform="translate(408,58)"> <rect x="-8" y="-17" width="64" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$107,300</text> </g> </g> <g visibility="visible"> <g transform="translate(509,90)"> <rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$98,500</text> </g> </g> <g visibility="visible"> <g transform="translate(607,203)"> <rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$67,800</text> </g> </g> <g visibility="visible"> <g transform="translate(706,343)"> <rect x="-8" y="-17" width="58" height="24" transform="translate(0,0)" fill="rgb(95,139,149)" stroke-width="0" stroke="none" isEmpty="false"></rect> <text x="0" y="0" transform="translate(0,0)" style="fill:#ffffff;font-family:'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;font-weight:400;font-size:12px;cursor:default;">$29,500</text> </g> </g> </g> <g class="dxc-labels" clip-path="url(#DevExpress_30)" opacity="0.001" transform="translate(0,0)"></g> </g> <g class="dxc-crosshair-cursor"></g> <g class="dxc-legend" clip-path="url(#DevExpress_14)"></g> </svg> 

將鼠標懸停在X軸標題上時，需要顯示自定義工具提示 ，例如Bar 1-7。

SVG是自動生成的，可通過具有儀表板詳細信息的XML文件進行控制。 請參閱步驟17

我相信，我們需要更改此生成的Dashboard XML

我的問題是：

是否可以在X軸標題上顯示（鼠標懸停）標題？

有什么建議嗎，好心的人？

Answer 1

要自定義Axis Labels ，請配置用於直接顯示圖表項目的dxChart 。 請查看訪問底層小部件的文章，其中描述了如何訪問dxChart小部件。

要自定義標簽提示，請定義dxChart.argumentAxis.label.customizeHint函數。 此線程中描述了此解決方案