代码之家 › 专栏 › 技术社区 › xhadon

在多系列图表的FusionCharts“plotToolText”中仅打印一次标签

fusioncharts javascript

xhadon · 技术社区 · 6 年前

multiseries 2d chart from FusionCharts 为了我们的申请。因为宏的值 $label 对于每个系列都是相同的,我想以以下方式在工具提示中显示悬停系列的信息:

<label>
<plotColor1> <seriesName>: <displayValue>
<plotColor2> <seriesName2>: <displayValue2>
...

但我只知道:

<label1>
<plotColor1> <seriesName>: <displayValue>
<label2>
<plotColor2> <seriesName2>: <displayValue2>
...

目前我正在设置属性 plotToolText 到

"$label {br} $seriesName: $dataValue"

我本想先在FusionCharts论坛上问的,但似乎你不能再创建一个帐户了。

资源:

Demo of my issue (将鼠标悬停在任何数据点上以查看工具提示)
Docs about tooltips

感谢您的帮助!

1 回复 | 直到 6 年前

Akash 6 年前

“绘图工具文本”集将适用于图表上的所有绘图。因此,当启用交叉线时,在“plotToolText”中设置$label将在工具提示中为位于该特定标签上的所有绘图显示相同的标签。

选择1

并将第二个数据集(系列)的所有数据对象设置为 “toolText”:“$seriesName-$dataValue”

供参考的样品: https://jsfiddle.net/5prLxygk

FusionCharts.ready(function() {
  var visitChart = new FusionCharts({
    type: 'msline',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Number of visitors last week",
        "subCaption": "Bakersfield Central vs Los Angeles Topanga",
        "xAxisName": "Day",
        //"plotToolText": "$label {br} $seriesName - $dataValue"
      },
      "categories": [{
        "category": [{
            "label": "Mon"
          },
          {
            "label": "Tue"
          },
          {
            "label": "Wed"
          },
          {
            "vline": "true",
            "lineposition": "0",
            "color": "#62B58F",
            "labelHAlign": "center",
            "labelPosition": "0",
            "label": "National holiday",
            "dashed": "1"
          },
          {
            "label": "Thu"
          },
          {
            "label": "Fri"
          },
          {
            "label": "Sat"
          },
          {
            "label": "Sun"
          }
        ]
      }],
      "dataset": [{
          "seriesname": "Bakersfield Central",
          "data": [{
              "value": "15123",
              "toolText": "$label {br} $seriesName - $dataValue"
            },
            {
              "value": "14233",
              "toolText": "$label {br} $seriesName - $dataValue"
            },
            {
              "value": "25507",
              "toolText": "$label {br} $seriesName - $dataValue"
            },
            {
              "value": "9110",
              "toolText": "$label {br} $seriesName - $dataValue"
            },
            {
              "value": "15529",
              "toolText": "$label {br} $seriesName - $dataValue"
            },
            {
              "value": "20803",
              "toolText": "$label {br} $seriesName - $dataValue"
            },
            {
              "value": "19202",
              "toolText": "$label {br} $seriesName - $dataValue"
            }
          ]
        },
        {
          "seriesname": "Los Angeles Topanga",
          "data": [{
              "value": "13400",
              "toolText": "$seriesName - $dataValue"
            },
            {
              "value": "12800",
              "toolText": "$seriesName - $dataValue"
            },
            {
              "value": "22800",
              "toolText": "$seriesName - $dataValue"
            },
            {
              "value": "12400",
              "toolText": "$seriesName - $dataValue"
            },
            {
              "value": "15800",
              "toolText": "$seriesName - $dataValue"
            },
            {
              "value": "19800",
              "toolText": "$seriesName - $dataValue"
            },
            {
              "value": "21800",
              "toolText": "$seriesName - $dataValue"
            }
          ]
        }
      ],
      "trendlines": [{
        "line": [{
          "startvalue": "17022",
          "color": "#62B58F",
          "valueOnRight": "1",
          "displayvalue": "Average"
        }]
      }]
    }
  }).render();
});

选择2

设置图表级别的“plotToolText”属性如下: “plotToolText”:“$label{br}$seriesName-$dataValue”

无需为第一个数据集(系列)设置“toolText”属性

对于第二个数据集(系列)的数据对象

请注意:“toolText”属性位于数据级别,而“plotToolText”属性位于图表级别的数据源。

供参考的样品: https://jsfiddle.net/5prLxygk/1/

FusionCharts.ready(function() {
  var visitChart = new FusionCharts({
    type: 'msline',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Number of visitors last week",
        "subCaption": "Bakersfield Central vs Los Angeles Topanga",
        "xAxisName": "Day",
        "plotToolText": "$label {br} $seriesName - $dataValue"
      },
      "categories": [{
        "category": [{
            "label": "Mon"
          },
          {
            "label": "Tue"
          },
          {
            "label": "Wed"
          },
          {
            "vline": "true",
            "lineposition": "0",
            "color": "#62B58F",
            "labelHAlign": "center",
            "labelPosition": "0",
            "label": "National holiday",
            "dashed": "1"
          },
          {
            "label": "Thu"
          },
          {
            "label": "Fri"
          },
          {
            "label": "Sat"
          },
          {
            "label": "Sun"
          }
        ]
      }],
      "dataset": [{
          "seriesname": "Bakersfield Central",
          "data": [{
              "value": "15123",
              //"toolText": "$label {br} $seriesName - $dataValue"
            },
            {
              "value": "14233",
              //"toolText": "$label {br} $seriesName - $dataValue"
            },
            {
              "value": "25507",
              //"toolText": "$label {br} $seriesName - $dataValue"
            },
            {
              "value": "9110",
              //"toolText": "$label {br} $seriesName - $dataValue"
            },
            {
              "value": "15529",
              //"toolText": "$label {br} $seriesName - $dataValue"
            },
            {
              "value": "20803",
              //"toolText": "$label {br} $seriesName - $dataValue"
            },
            {
              "value": "19202",
              //"toolText": "$label {br} $seriesName - $dataValue"
            }
          ]
        },
        {
          "seriesname": "Los Angeles Topanga",
          "data": [{
              "value": "13400",
              "toolText": "$seriesName - $dataValue"
            },
            {
              "value": "12800",
              "toolText": "$seriesName - $dataValue"
            },
            {
              "value": "22800",
              "toolText": "$seriesName - $dataValue"
            },
            {
              "value": "12400",
              "toolText": "$seriesName - $dataValue"
            },
            {
              "value": "15800",
              "toolText": "$seriesName - $dataValue"
            },
            {
              "value": "19800",
              "toolText": "$seriesName - $dataValue"
            },
            {
              "value": "21800",
              "toolText": "$seriesName - $dataValue"
            }
          ]
        }
      ],
      "trendlines": [{
        "line": [{
          "startvalue": "17022",
          "color": "#62B58F",
          "valueOnRight": "1",
          "displayvalue": "Average"
        }]
      }]
    }
  }).render();
});