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

Question

我们将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 每个工具提示只显示一次标签？ 我会先在 FusionCharts 论坛上询问，但您似乎无法创建帐户（现在？）。

资源：

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

感谢任何帮助！

Answer 1

“plotToolText”设置将适用于图表上的所有绘图。因此，启用交叉线后，在“plotToolText”中设置 $label 将在工具提示中为驻留在该特定标签上的所有绘图显示相同的标签。

为了满足您的要求，您也可以使用以下解决方法：

选项 1

用“toolText”设置第一个数据集（系列）的所有数据对象：“$label {br} $seriesName - $dataValue”

并将第二个数据集（系列）的所有数据对象设置为 "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": "$seriesName - $dataValue"

请注意：数据级的“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();
});

Answer 2

您可以只显示第一个系列标签并隐藏其他标签。 请使用 dataSource.plotToolText 属性而不是数据集的工具文本

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": "<div class='plottooltext-label'>$label</div> {br} $seriesName - $dataValue"
      },
     ...
    }
   })
});

在全局css文件中添加这个样式

.fc__tooltip.fusioncharts-div div .plottooltext-label {
    display: none;
}
.fc__tooltip.fusioncharts-div div:first-child .plottooltext-label {
    display: block;
}