在p:chart中编辑数据提示位置

时间:2018-07-25 07:30:29

标签: charts primefaces tooltip jqplot

我正在使用PrimeFaces 6.0,并且希望在条形图上显示工具提示。我尝试了this example之类的datatipeditor,它工作正常。问题是,我可能会在工具提示中使用长文本,而最左侧的栏将不会显示全文like this

我尝试使用此代码移动位置。

    <groupId>com.dkaedv</groupId>
    <artifactId>glghproxy</artifactId>
    <version>0.4.2-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>glghproxy</name>
    <description>GitLab GitHub Proxy</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.3.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <java.version>1.8</java.version>
        <tomcat.version>8.0.45</tomcat.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>de.gebit</groupId>
            <artifactId>java-gitlab-api</artifactId>
            <version>4.0.3</version>
        </dependency>
        <dependency>
            <groupId>org.eclipse.mylyn.github</groupId>
            <artifactId>org.eclipse.egit.github.core</artifactId>
            <version>4.8.0.201706111038-r</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.6</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

    <repositories>
        <repository>
            <id>Nexus</id>
            <name>Maven Central</name>
            <url>HTTPS: https://repo1.maven.org/maven2</url>
        </repository>
        <repository>
            <id>egit</id>
            <name>Eclipse egit</name>
            <url>https://repo.eclipse.org/content/repositories/egit-releases/</url>
        </repository>
    </repositories>
    <scm>
        <connection>scm:git:https://github.com/GEBIT/gitlab-github-proxy.git</connection>
        <url>https://github.com/GEBIT/gitlab-github-proxy.git</url>
      <tag>glghproxy-0.3.0</tag>
  </scm>
</project>

文本按照i的设计移动,但框仍在like this处。

我本来打算使用扩展器,但在文档页面上迷失了关于使用哪个属性以及如何将bean中的数据作为工具提示文本传递的信息。

有没有办法将框和文本都移动到我使用datatipeditor设计的位置?

1 个答案:

答案 0 :(得分:1)

内部bean:

CartesianChartModel barModel = new BarChartModel();
barModel.setExtender("myExtender");

然后在我的js中,我使用荧光笔的tooltipContentEditor,这是代码:

function myExtender(){
     this.cfg.highlighter = {
          tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) {
             var val = plot.data[seriesIndex][pointIndex];
             return "this value is: " + val + "<br/>this is a looooooooooooong text";
          },
     show: true, 
     useAxesFormatters: false,
     tooltipLocation: 'n'
     };
}

这里是result