DevExpress仪表板控件 - 在条形图轴标签上显示文本

Question

我bar chart control内有DevExpress dashboard control looks like this

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

当我将鼠标悬停在 X轴标题上时，我需要显示自定义tool tip，即条形码1-7。

SVG是自动生成的，由具有仪表板详细信息的XML文件控制。 Refer Step 17

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

我的问题是：

  

是否可以在X轴标题上显示（鼠标悬停）标题？

任何建议，善良的人？

Answer 1

要自定义Axis Labels，请配置用于直接显示图表项目的dxChart。请查看Access to Underlying Widgets文章，其中介绍了如何访问dxChart小部件。

要自定义标签提示，请定义dxChart.argumentAxis.label.customizeHint功能。该解决方案在this thread

中描述