本文介绍了在dxChart中自定义工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在使用DevExtreme的dxchart做我的第一步。目前，我有以下代码： HTML： <！DOCTYPE html> < html> < head> < meta charset = utf-8 /> < title> DevExtreme图表< / title> <！-FRAMEWOKR-> < script type = text / javascript src = http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js>< / script> < script src = ./ lib / globalize.min.js>< / script> < script src = ./ lib / dx.charts.js>< / script> <！-JS-> < script type = text / javascript src = chart.js>< / script> < / head> < body> < div id = chartContainer style = width：100％; height：440px>< / div> < / body> < / html> JS： $（document）.ready（function（）{ var dataSource = [ {参数：'15 .06.2016'，脉冲：102，温度：37.6，重量：91 }， {参数：'16 .06.2016'， pulse： 99，温度：35.1，重量：88 }， {参数：'17 .06.2016'， puls：87，温度：38.0，重量：87 }， {参数：'18 .06.2016'，脉冲数：91，温度： 36.3，重量：87 }， {参数：'19 .06.2016'， puls：112，温度：37.1，重量：90 } ]; $（＃chartContainer）。d xChart（{ dataSource：dataSource， commonSeriesSettings：{ type： spline，标签：{可见：false，连接器：{ 可见：false } }，参数字段：参数，轴： pulsAxe }，工具提示：{已启用：true， customTooltip：function（obj）{ return {文本：obj.seriesName } } }， 图例：{ verticalAlignment：顶部， horizontalAlignment：右侧 }，导出：{已启用：true }，标题：{文字： Hugo Amacher | 1977年8月15日（M），副标题：{ enabled：true， text： Ich bin ein Untertitel ... } }， zoomingMode：全部，系列：[ {名称： Puls， valueField： pulse }， {名称： Temperatur， valueField： temperatur，轴： temperaturAxe }， {名称： Gewicht ， valueField： weight，轴： weightAxe } ]， valueAxis：[ { name： pulsAxe，标题： Puls，位置： left，标签：{ customText：function（value）{ return value.value + bpm } } }， {名称： temperaturAxe，标题： Temperatur，位置： left，标签：{ customText：函数（值）{返回值。值+°C } } }， {名称： weightAxe，标题： Gewicht，位置： left，标签：{ customText：函数（值）{ return value.value + kg } } } ] }）； }）； 我的结果是这样： 如您所见，有一个简单的样条图，其中包含三个不同的y轴和三个不同的值范围图表上的此轴。对于每个斧头，我都有一个标签（bpm，°C和kg）。我还实现了dxchart的工具提示。当我将鼠标悬停在某个点时，工具提示中仅包含该值。我还想将值后面的标签动态地添加到工具提示中。这意味着，当我将 Puls轴的值悬停时，它应显示为：91 bpm。我怎样才能做到这一点。我使用了customTooltip进行了尝试：您好，请检查Plunker https://plnkr.co/edit/6Uoh30bb8qBNWIIbyX0O?p=preview 检查您的图书馆包括 HTML <！DOCTYPE html> < html> < head> < meta charset = utf-8 /> < title>< / title> < link rel = stylesheet href = style.css /> < script type = text / javascript src = https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js>< / script> < script type = text / javascript src = https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js>< / script> < script type = text / javascript src = https://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js>< / script> < script src = script.js>< / script> < / head> < body> < div id = chartContainer style = width：100％; height：440px>< / div> < ;!-将您的html放在这里！ -> < / body> < / html> 和 JS ///在此处添加您的JavaScript $ {function（）{ var dataSource = [ {参数：'15 .06。 2016'， puls：102，温度：37.6，重量：91 }， {参数：'16 .06.2016'， puls：99，温度：35.1，重量：88 }， {参数：'17 .06.2016'， puls ：87，温度：38.0，重量：87 }， {参数：'18 .06.2016'， puls：91，温度：36.3，重量：87 }， {参数：'19 .06.2016'， puls：112，温度：37.1，重量：90 } ]; $（ #chartContainer）。dxChart（{ dataSource：dataSource， commonSeriesSettings：{ type： spline， label：{ visible：false，连接器：{可见：false } }，参数字段：参数，轴： pulsAxe }，工具提示：{已启用：是， customTooltip：函数（obj）{ console.log（obj.seriesName） if（obj.seriesName == Puls ）{ return { text：obj.value + bpm } } else if（obj.seriesName == Gewicht）{ return { 文本：obj.value + kg } }否则if（obj.seriesName == Temperatur）{返回{文本：obj。值+°C } } //返回{ //文本：obj.seriesName //} } }，图例：{ verticalAlignment：顶部， horizontalAlignment：右侧 }，导出：{已启用：true }，标题：{文字： Hugo Amacher | 1977年8月15日（M），副标题：{ enabled：true， text： Ich bin ein Untertitel ... } }， zoomingMode：全部，系列：[ {名称： Puls， valueField： pulse }， {名称： Temperatur， valueField： temperatur，轴： temperaturAxe }， {名称： Gewicht ， valueField： weight，轴： weightAxe } ]， valueAxis：[ { name： pulsAxe，标题： Puls，位置： left，标签：{ customText：function（value）{ return value.value + bpm } } }， {名称： temperaturAxe，标题： Temperatur，位置： left，标签：{ customText：函数（值）{返回值。值+°C } } }， {名称： weightAxe，标题： Gewicht，位置： left，标签：{ customText：函数（值）{ return value.value + kg } } } ] }）； }）； I'm doing my first steps with dxchart of DevExtreme. At the moment I've got follow code:HTML:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>DevExtreme Chart</title> <!--FRAMEWOKR--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> <script src="./lib/globalize.min.js"></script> <script src="./lib/dx.charts.js"></script> <!--JS--> <script type="text/javascript" src="chart.js"></script> </head> <body> <div id="chartContainer" style="width:100%; height: 440px"></div> </body></html>JS:$(document).ready(function(){ var dataSource = [ { argument: '15.06.2016', puls: 102, temperatur: 37.6, weight: 91 }, { argument: '16.06.2016', puls: 99, temperatur: 35.1, weight: 88 }, { argument: '17.06.2016', puls: 87, temperatur: 38.0, weight: 87 }, { argument: '18.06.2016', puls: 91, temperatur: 36.3, weight: 87 }, { argument: '19.06.2016', puls: 112, temperatur: 37.1, weight: 90 } ]; $("#chartContainer").dxChart({ dataSource: dataSource, commonSeriesSettings: { type: "spline", label: { visible: false, connector: { visible: false } }, argumentField: "argument", axis: "pulsAxe" }, tooltip: { enabled: true, customizeTooltip: function(obj) { return { text: obj.seriesName } } }, legend: { verticalAlignment: "top", horizontalAlignment: "right" }, "export": { enabled: true }, title: { text: "Hugo Amacher | 15.08.1977 (M)", subtitle: { enabled: true, text: "Ich bin ein Untertitel..." } }, zoomingMode: "all", series: [ { name: "Puls", valueField: "puls" }, { name: "Temperatur", valueField: "temperatur", axis: "temperaturAxe" }, { name: "Gewicht", valueField: "weight", axis: "weightAxe" } ], valueAxis: [ { name: "pulsAxe", title: "Puls", position: "left", label: { customizeText: function(value) { return value.value + " bpm" } } }, { name: "temperaturAxe", title: "Temperatur", position: "left", label: { customizeText: function(value) { return value.value + " °C" } } }, { name: "weightAxe", title: "Gewicht", position: "left", label: { customizeText: function(value) { return value.value + " kg" } } } ] });});My result is this:As you can see, there is a simple spline chart, with three various y-axes and three various value-ranges for this axes on the chart. For each axe, I've got an label (bpm, °C and kg). I implemented also the tooltip of dxchart. At the moment when I hover a point, in the tooltip there is only the value. I also would like to add dynamicly to the tooltip the label after the value. That means, when I hover a value of the axe "Puls", it should show for example this: 91 bpm. How can I do this. I tried it with the customizeTooltip: http://js.devexpress.com/Documentation/ApiReference/Data_Visualization_Widgets/dxChart/Configuration/tooltip/?version=16_1#customizeTooltipI had the idea, to check the seriesName and assign the label in the return something like this, but it didn't work:tooltip: { enabled: true, customizeTooltip: function(point) { if (point.seriesName == "Puls") { return { text: point.value + " bpm" } } else if (point.seriesName == "Gewicht") { return { text: point.value + " kg" } } else if (point.seriesName == "Temperatur") { return { text: point.value + " °C" } } }}, 解决方案 Hi please check the Plunker https://plnkr.co/edit/6Uoh30bb8qBNWIIbyX0O?p=previewcheck your library includesHTML<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="style.css" /><script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script><script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script><script type="text/javascript" src="https://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script> <script src="script.js"></script> </head> <body> <div id="chartContainer" style="width:100%; height: 440px"></div> <!-- Put your html here! --> </body></html>and JS // Add your javascript here$(function(){ var dataSource = [ { argument: '15.06.2016', puls: 102, temperatur: 37.6, weight: 91 }, { argument: '16.06.2016', puls: 99, temperatur: 35.1, weight: 88 }, { argument: '17.06.2016', puls: 87, temperatur: 38.0, weight: 87 }, { argument: '18.06.2016', puls: 91, temperatur: 36.3, weight: 87 }, { argument: '19.06.2016', puls: 112, temperatur: 37.1, weight: 90 } ]; $("#chartContainer").dxChart({ dataSource: dataSource, commonSeriesSettings: { type: "spline", label: { visible: false, connector: { visible: false } }, argumentField: "argument", axis: "pulsAxe" }, tooltip: { enabled: true, customizeTooltip: function(obj) { console.log(obj.seriesName) if (obj.seriesName == "Puls") { return { text: obj.value + " bpm" } } else if (obj.seriesName == "Gewicht") { return { text: obj.value + " kg" } } else if (obj.seriesName == "Temperatur") { return { text: obj.value + " °C" } } // return { // text: obj.seriesName // } } }, legend: { verticalAlignment: "top", horizontalAlignment: "right" }, "export": { enabled: true }, title: { text: "Hugo Amacher | 15.08.1977 (M)", subtitle: { enabled: true, text: "Ich bin ein Untertitel..." } }, zoomingMode: "all", series: [ { name: "Puls", valueField: "puls" }, { name: "Temperatur", valueField: "temperatur", axis: "temperaturAxe" }, { name: "Gewicht", valueField: "weight", axis: "weightAxe" } ], valueAxis: [ { name: "pulsAxe", title: "Puls", position: "left", label: { customizeText: function(value) { return value.value + " bpm" } } }, { name: "temperaturAxe", title: "Temperatur", position: "left", label: { customizeText: function(value) { return value.value + " °C" } } }, { name: "weightAxe", title: "Gewicht", position: "left", label: { customizeText: function(value) { return value.value + " kg" } } } ] });}); 这篇关于在dxChart中自定义工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
