Dojo MouseIndicator可以是HTML而不僅僅是純文本嗎？

Question

我有一些圖表代碼，而我將一個MouseIndicator添加到折線圖。我希望MouseIndicator上的文本是HTML，但我不確定這是否可行，因爲它不起作用。我添加了一個labelFunc來返回我想要的HTML，但它只是以純文本顯示。

我得到了代碼JSFiddle（及以下），所以你可以試試看。

任何幫助表示讚賞。

require(["dojox/charting/Chart", 
      "dojox/charting/action2d/Magnify", 
      "dojox/charting/action2d/Highlight", 
      "dojox/charting/action2d/Tooltip", 
      "dojox/charting/widget/Legend", 
      "dojox/charting/themes/PlotKit/green", 
      "dojox/charting/plot2d/StackedLines", 
      "dojox/charting/action2d/MouseIndicator", 
      "dojox/charting/axis2d/Default", 
      "dojo/ready" 
     ], function(Chart, Magnify, Highlight, Tooltip, Legend, theme_green, _lines, MouseIndicator, _axis, ready) { 
// wrapped in domready event 
ready(function() { 
    // create a chart with placeholder div#charty 
    var chart2 = new Chart("chart"); 
    chart2.setTheme(theme_green); 
    chart2.addPlot("default", { 
     type: "StackedLines", 
     markers: true, 
     // create round dots on plot-points 
     tension: 3, 
     // curve slightly 
     shadows: { // add shadow 
      dx: 2, 
      dy: 2, 
      dw: 2 
     } 
    }); 
    chart2.addAxis("x", { 
     min: 0, 
     majorTick: { 
      stroke: "black", 
      length: 3 
     }, 
     minorTick: { 
      stroke: "gray", 
      length: 3 
     } 
    }); 
    chart2.addAxis("y", { 
     vertical: true, 
     min: 0, 
     max: 6, 
     majorTick: { 
      stroke: "black", 
      length: 3 
     }, 
     minorTick: { 
      stroke: "gray", 
      length: 3 
     } 
    }); 
    // each point, added to a series. 
    // note the first entry in Series A which has the 
    // customizable object notation 
    // Hover mouse over lower left point (first red square" 
    chart2.addSeries("Series A", [{ 
     x: 0.5, 
     y: 3.5, 
     tooltip: "Custom data"} 
     , 1.1, 1.2, 1.3, 1.4, 1.5, 1.6], { 
     stroke: { 
      color: "red", 
      width: 2 
     }, 
     fill: "lightpink", 
     marker: "m-3,-3 l0,6 6,0 0,-6 z" 
    }); 
    chart2.addSeries("Series B", [1, 1.6, 1.3, 1.4, 1.1, 1.5, 1.1], { 
     stroke: { 
      color: "blue", 
      width: 2 
     }, 
     fill: "lightblue", 
     marker: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0" 
    }); 
    chart2.addSeries("Series C", [1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6], { 
     stroke: { 
      color: "green", 
      width: 2 
     }, 
     fill: "lightgreen", 
     marker: "m0,-3 l3,3 -3,3 -3,-3 z" 
    }); 
    var anim2a = new Magnify(chart2, "default", { 
     scale: 3 
    }); 
    var anim2b = new Highlight(chart2, "default"); 
    var anim2c = new Tooltip(chart2, "default"); 
    var legend2 = new Legend({ 
     chart: chart2 
    }, "legend2"); 

     new dojox.charting.action2d.MouseIndicator(chart2, "default", { 
      series : "Series A", 
      mouseOver: true, 
      labelFunc: function(v, v2){ 
          return "<div>fred</br></br>betty</div>"; 
      }, 
      fillFunc: function(v){ 
          return '#fcfcfc'; 
      }, 
      fontColor:'black', 
         stroke: {width: 2, color: 'purple'}, 
         lineStroke: {width: 2, color: 'green'}, 
         dualIndicator: true 
     }); 

    chart2.render(); 
}); 

}）;

Answer 1

默認情況下，只渲染純文本，因爲渲染是通過SVG或Canvas完成的（或針對舊IE的VML）。但是你應該可以自定義這個來渲染一些HTML。

要繼續的方法是告訴數據指示器不要渲染標籤本身（標籤：false），並在發生更改事件時自己執行。類似下面的（這裏使用的dijit /工具提示，但你可以使用任何其他的方式來渲染HTML）：

require(["dojo/ready", "dojo/on", "dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Lines", 
"dojox/charting/action2d/MouseIndicator", "dijit/Tooltip", "dijit/place"], 
function(ready, on, Chart, Default, Lines, MouseIndicator, Tooltip, place){ 

ready(function(){ 
    var chart = new Chart("chart", { margins : {l :20, t:10, b:10, r: 50}}); 
    chart.addAxis("x", {fixLower: "minor", natural: true, stroke: "gray", 
     majorTick: {color: "red", length: 4}, minorTick: {color: "blue", length: 2}}); 
    chart.addAxis("y", {vertical: true, min: 0, max: 100, majorTickStep: 10, minorTickStep: 5, stroke: "gray", 
     majorTick: {stroke: "black", length: 4}, minorTick: {stroke: "gray", length: 2}}); 
    chart.addPlot("default", {type: Lines, markers: false}); 
    chart.addSeries("Series A", [ 
     { x: 1, y: 8},{ x: 2, y: 7},{ x: 3, y: 3},{ x: 4, y: 2},{ x: 5, y: 5},{ x: 6, y: 7},{ x: 7, y: 9},{ x: 8, y: 10},{ x: 9, y: 2},{ x: 10, y: 10}, 
     { x: 15, y: 14},{ x: 16, y: 16},{ x: 17, y: 18},{ x: 18, y: 13},{ x: 19, y: 16},{ x: 20, y: 15},{ x: 21, y: 20},{ x: 22, y: 19},{ x: 23, y: 15},{ x: 24, y: 12}, 
     { x: 25, y: 24},{ x: 26, y: 20},{ x: 27, y: 20},{ x: 28, y: 26},{ x: 29, y: 28},{ x: 30, y: 26},{ x: 31, y: 28},{ x: 32, y: 29},{ x: 33, y: 24},{ x: 34, y: 29}, 
     { x: 35, y: 31},{ x: 36, y: 35},{ x: 37, y: 37},{ x: 38, y: 31},{ x: 39, y: 35},{ x: 40, y: 37},{ x: 41, y: 37},{ x: 42, y: 36},{ x: 43, y: 31},{ x: 44, y: 30}, 
     { x: 45, y: 50},{ x: 46, y: 49},{ x: 47, y: 42},{ x: 48, y: 46},{ x: 49, y: 44},{ x: 50, y: 40},{ x: 51, y: 47},{ x: 52, y: 43},{ x: 53, y: 48},{ x: 54, y: 47}, 
     { x: 55, y: 51},{ x: 56, y: 52},{ x: 57, y: 52},{ x: 58, y: 51},{ x: 59, y: 54},{ x: 60, y: 57},{ x: 61, y: 58},{ x: 62, y: 50},{ x: 63, y: 54},{ x: 64, y: 51}, 
     { x: 65, y: 62},{ x: 66, y: 68},{ x: 67, y: 67},{ x: 68, y: 62},{ x: 69, y: 62},{ x: 70, y: 65},{ x: 71, y: 61},{ x: 72, y: 66},{ x: 73, y: 65},{ x: 74, y: 62}, 
     { x: 75, y: 74},{ x: 76, y: 78},{ x: 77, y: 78},{ x: 78, y: 77},{ x: 79, y: 74},{ x: 80, y: 74},{ x: 81, y: 72},{ x: 82, y: 74},{ x: 83, y: 70},{ x: 84, y: 78}, 
     { x: 85, y: 84},{ x: 86, y: 83},{ x: 87, y: 85},{ x: 88, y: 86},{ x: 89, y: 86},{ x: 90, y: 89},{ x: 91, y: 89},{ x: 92, y: 85},{ x: 93, y: 86},{ x: 94, y: 86}, 
     { x: 95, y: 98},{ x: 96, y: 97},{ x: 97, y: 93},{ x: 98, y: 91},{ x: 99, y: 92},{ x: 100, y: 92} 
    ]); 
    var i = MouseIndicator(chart, "default", { series: "Series A", labels: false }); 
    var tooltip = new Tooltip(); 
    on(i, "Change", function(evt){ 
     if(evt.label){ 
      var around = chart.getPlot("default").toPage({ x: evt.start.x, y: maxVertical }); 
      around.w = 1; 
      around.h = 1; 
      tooltip.label = "<h1>value:</h1><h2>" + evt.start.y + "</h2>"; 
      tooltip.position = ["above-centered"]; 
      if (!shown) { 
       shown = true; 
       tooltip.open(around); 
      } else { 
       Tooltip._masterTT.containerNode.innerHTML = tooltip.label; 
       place.around(Tooltip._masterTT.domNode, around, ["above-centered"]); 
      } 
     } else { 
      // hide 
      tooltip.close(); 
      shown = false; 
     } 
    }); 
    chart.render(); 
    var maxVertical = chart.getAxis("y").getScaler().bounds.to; 
    var shown = false; 
}) 

}）;