FusionCharts stackedbar2d 中文本的位置

问题描述 投票：0回答：2

我有几个 stackedbar2d ，它们的值非常不同。条中必须包含文本以及条的值。

对于文本的位置我有这一行：

`"x": "$dataset.1.set.0.X - 90",`

在 stackedbar2d 的脚本中。 我必须根据条长度的每个值更改 x 位置的编号，否则文本在显示中不会位于同一位置。

这个问题有什么解决办法吗？也许通过计算两个条形的总长度（以像素为单位）和一个常数？

这是一个小提琴示例。

第一张图：

"groups": [
          {
            "id": "Callout", "items": [
              {
                "id": "CalloutLabel0",
                "type": "Text",
                "fontSize": "12",
                "bold": "0",
                "fillcolor": "#333",
                "text": "N=164 MW=5.8",
                "align":"left",
                "x": "$dataset.1.set.0.X - 200",
                "y": "$dataset.0.set.0.starty + 10"
              },

`$dataset.1.set.0.X - 200`

如下图：

$dataset.1.set.0.X - 320

如果两个图表都有 $dataset.1.set.0.X - 320 那么您将在此处得到此结果。 （请使用chrome浏览器进行小提琴）

javascript fusioncharts stacked-chart
2个回答
0
投票

您似乎非常接近您的实现。您可能想从这里了解有关宏的更多信息 我不完全确定您最终想要实现的确切视觉效果，但这是我的假设 - 您希望将这些带注释的文本放置在灰色部分内的某个位置。 下面的代码片段显示了简单的修改：

  • 使用宏$centerX
  • 减去 45，因为该文本的整个宽度接近 90。因此减去 (90 / 2 = 45) 使其居中。
  • 我不确定为什么所有条目中都使用相同的集合。 
    $dataset.1.set.0
    。由于数据是动态的，请尝试使用适当的集合索引
  • 关于注释组中发现的重复 ID 的另一个建议。 ID 应该是唯一的，对吧:)

//BarCharts TOP 5
var revenueChart = new FusionCharts({
  type: "stackedbar2d",
  renderAt: "chart-container11a",
  width: "680",
  height: "230",
  dataFormat: "json",
  dataSource: {
    "chart": {
      "caption": "" + unescape("Top 5") + "",
      "subCaption": "",
      "xAxisname": "",
      "yAxisName": "",
      "yAxisMinValue": "5",
      "yAxisMaxValue": "7",
      "showXAxisLine": "1",
      "xAxisLineColor": "#999999",
      "divlineColor": "#999999",
      "divLineIsDashed": "1",
      "numberPrefix": "",
      "paletteColors": "#D9D9D9,#02B051",
      "bgColor": "#ffffff",
      "borderAlpha": "0",
      "showCanvasBorder": "0",
      "usePlotGradientColor": "0",
      "plotBorderAlpha": "10",
      "legendBorderAlpha": "0",
      "legendShadow": "0",
      "valueFontColor": "#333",
      "showAlternateVGridColor": "0",
      "subcaptionFontBold": "0",
      "subcaptionFontSize": "14",
      "showHoverEffect": "1",
      "maxBarHeight": "20",
      "numDivLines": "0",
      "showValues": "0",
      "canvasLeftMargin": "200",
      "captionAlignment": "left",
      "showYAxisValues": "0"
    },
    "categories": [{
      "category": [{
          "label": "Item 1"
        },
        {
          "label": "Item 2"
        },
        {
          "label": "Item 3"
        },
        {
          "label": "Item 4"
        },
        {
          "label": "Item 5"
        }
      ]
    }],
    "dataset": [{
        "seriesname": "",
        "data": [{
            "value": "6.3",
            "tooltext": "Item 1 MW=6.683"
          },
          {
            "value": "6.3",
            "tooltext": "Item 2 MW=6.673"
          },
          {
            "value": "6.3",
            "tooltext": "Item 3 MW=6.613"
          },
          {
            "value": "6.3",
            "tooltext": "Item 4 MW=6.598"
          },
          {
            "value": "6.3",
            "tooltext": "Item 5 MW=6.554"
          }
        ]
      },
      {
        "seriesname": "",
        "data": [{
            "value": "0.383",
            "tooltext": "Item 1 Diff. zum MW=+0.383"
          },
          {
            "value": "0.373",
            "tooltext": "Item 2 Diff. zum MW=+0.373"
          },
          {
            "value": "0.313",
            "tooltext": "Item 3 Diff. zum MW=+0.313"
          },
          {
            "value": "0.298",
            "tooltext": "Item 4 Diff. zum MW=+0.298"
          },
          {
            "value": "0.254",
            "tooltext": "Item 5 Diff. zum MW=+0.254"
          }
        ]
      }
    ],
    "trendlines": [{
      "line": [{
          "startvalue": "5.0",
          "color": "#333",
          "alpha": "70",
          "valueOnRight": "2",
          "displayvalue": "5"
        },
        {
          "startvalue": "5.5",
          "color": "#333",
          "alpha": "0",
          "valueOnRight": "2",
          "displayvalue": ""
        },
        {
          "startvalue": "6.0",
          "color": "#333",
          "valueOnRight": "0",
          "displayvalue": ""
        },
        {
          "startvalue": "6.5",
          "color": "#333",
          "valueOnRight": "2",
          "displayvalue": ""
        },
        {
          "startvalue": "7.0",
          "color": "#333",
          "alpha": "70",
          "valueOnRight": "2",
          "displayvalue": "7"
        },
        {
          "isTrendZone": "2",
          "startvalue": "5",
          "endValue": "6",
          "color": "#ff0000",
          "alpha": "7",
          "valueOnRight": "0",
          "displayvalue": " "
        },
        {
          "isTrendZone": "2",
          "startvalue": "6",
          "endValue": "6.5",
          "color": "#FFFF00",
          "alpha": "7",
          "valueOnRight": "0",
          "displayvalue": " "
        },
        {
          "isTrendZone": "2",
          "startvalue": "6.5",
          "endValue": "7",
          "color": "#02B052",
          "alpha": "7",
          "valueOnRight": "0",
          "displayvalue": " "
        }
      ]
    }],
    "annotations": {
      "drawImmediately": "1",
      "showbelow": "0",
      "groups": [{
        "id": "Callout",
        "items": [{
            "id": "CalloutLabel1",
            "type": "Text",
            "fontSize": "12",
            "bold": "0",
            "fillcolor": "#333",
            "text": "N=63 MW=6.7",
            "align": "left",
            "x": "$dataset.0.set.0.centerX - 45",
            "y": "$dataset.0.set.0.starty + 10"
          },
          {
            "id": "CalloutLabel2",
            "type": "Text",
            "fontSize": "12",
            "bold": "0",
            "fillcolor": "#333",
            "text": "N=159 MW=6.7",
            "align": "left",
            "x": "$dataset.0.set.1.centerX - 45",
            "y": "$dataset.0.set.1.starty + 10"
          },
          {
            "id": "CalloutLabel1",
            "type": "Text",
            "fontSize": "12",
            "bold": "0",
            "fillcolor": "#333",
            "text": "N=62 MW=6.6",
            "align": "left",
            "x": "$dataset.0.set.2.centerX - 45",
            "y": "$dataset.0.set.2.starty + 10"
          },
          {
            "id": "CalloutLabel1",
            "type": "Text",
            "fontSize": "12",
            "bold": "0",
            "fillcolor": "#333",
            "text": "N=127 MW=6.6",
            "align": "left",
            "x": "$dataset.0.set.3.centerX - 45",
            "y": "$dataset.0.set.3.starty + 10"
          },
          {
            "id": "CalloutLabel1",
            "type": "Text",
            "fontSize": "12",
            "bold": "0",
            "fillcolor": "#333",
            "text": "N=168 MW=6.6",
            "align": "left",
            "x": "$dataset.0.set.4.centerX - 45",
            "y": "$dataset.0.set.4.starty + 10"
          }
        ]
      }]
    }
  }
}).render();

//BarCharts BOTTOM 5
var revenueChart = new FusionCharts({
  type: "stackedbar2d",
  renderAt: "chart-container11b",
  width: "680",
  height: "230",
  dataFormat: "json",
  dataSource: {
    "chart": {
      "caption": "" + unescape("Bottom 5") + "",
      "subCaption": "",
      "xAxisname": "",
      "yAxisName": "",
      "yAxisMinValue": "5",
      "yAxisMaxValue": "7",
      "showXAxisLine": "1",
      "xAxisLineColor": "#999999",
      "divlineColor": "#999999",
      "divLineIsDashed": "1",
      "numberPrefix": "",
      "paletteColors": "#D9D9D9,#FF0000",
      "bgColor": "#ffffff",
      "borderAlpha": "0",
      "showCanvasBorder": "0",
      "usePlotGradientColor": "0",
      "plotBorderAlpha": "10",
      "legendBorderAlpha": "0",
      "legendShadow": "0",
      "valueFontColor": "#333",
      "showAlternateVGridColor": "0",
      "subcaptionFontBold": "0",
      "subcaptionFontSize": "14",
      "showHoverEffect": "1",
      "maxBarHeight": "20",
      "numDivLines": "0",
      "showValues": "0",
      "canvasLeftMargin": "201",
      "captionAlignment": "left",
      "showYAxisValues": "0"
    },
    "categories": [{
      "category": [{
          "label": "Item 6"
        },
        {
          "label": "Item 7"
        },
        {
          "label": "Item 8"
        },
        {
          "label": "Item 9"
        },
        {
          "label": "Item 10"
        }
      ]
    }],
    "dataset": [{
        "seriesname": "",
        "data": [{
            "value": "5.799",
            "tooltext": "Item 6 MW=5.799"
          },
          {
            "value": "5.966",
            "tooltext": "Item 7 MW=5.966"
          },
          {
            "value": "6.000",
            "tooltext": "Item 8 MW=6.000"
          },
          {
            "value": "6.034",
            "tooltext": "Item 9 MW=6.034"
          },
          {
            "value": "6.050",
            "tooltext": "Item 10 MW=6.050"
          }
        ]
      },
      {
        "seriesname": "",
        "data": [{
            "value": "0.501",
            "tooltext": "Item 6 Diff. zum MW=-0.501"
          },
          {
            "value": "0.334",
            "tooltext": "Item 7 Diff. zum MW=-0.334"
          },
          {
            "value": "0.300",
            "tooltext": "Item 8 Diff. zum MW=-0.300"
          },
          {
            "value": "0.266",
            "tooltext": "Item 9 Diff. zum MW=-0.266"
          },
          {
            "value": "0.250",
            "tooltext": "Item 10 Diff. zum MW=-0.250"
          }
        ]
      }
    ],
    "trendlines": [{
      "line": [{
          "startvalue": "5.0",
          "color": "#333",
          "alpha": "70",
          "valueOnRight": "2",
          "displayvalue": "5"
        },
        {
          "startvalue": "5.5",
          "color": "#333",
          "alpha": "0",
          "valueOnRight": "2",
          "displayvalue": ""
        },
        {
          "startvalue": "6.0",
          "color": "#333",
          "valueOnRight": "0",
          "displayvalue": ""
        },
        {
          "startvalue": "6.5",
          "color": "#333",
          "valueOnRight": "2",
          "displayvalue": ""
        },
        {
          "startvalue": "7.0",
          "color": "#333",
          "alpha": "70",
          "valueOnRight": "2",
          "displayvalue": "7"
        },
        {
          "isTrendZone": "2",
          "startvalue": "5",
          "endValue": "6",
          "color": "#ff0000",
          "alpha": "7",
          "valueOnRight": "0",
          "displayvalue": " "
        },
        {
          "isTrendZone": "2",
          "startvalue": "6",
          "endValue": "6.5",
          "color": "#FFFF00",
          "alpha": "7",
          "valueOnRight": "0",
          "displayvalue": " "
        },
        {
          "isTrendZone": "2",
          "startvalue": "6.5",
          "endValue": "7",
          "color": "#02B052",
          "alpha": "7",
          "valueOnRight": "0",
          "displayvalue": " "
        }
      ]
    }],
    "annotations": {
      "drawImmediately": "1",
      "showbelow": "0",
      "groups": [{
        "id": "Callout",
        "items": [{
            "id": "CalloutLabel0",
            "type": "Text",
            "fontSize": "12",
            "bold": "0",
            "fillcolor": "#333",
            "text": "N=164 MW=5.8",
            "align": "left",
            "x": "$dataset.0.set.0.centerX - 45",
            "y": "$dataset.0.set.0.starty + 10"
          },
          {
            "id": "CalloutLabel1",
            "type": "Text",
            "fontSize": "12",
            "bold": "0",
            "fillcolor": "#333",
            "text": "N=117 MW=6.0",
            "align": "left",
            "x": "$dataset.0.set.1.centerX - 45",
            "y": "$dataset.0.set.1.starty + 10"
          },
          {
            "id": "CalloutLabel2",
            "type": "Text",
            "fontSize": "12",
            "bold": "0",
            "fillcolor": "#333",
            "text": "N=59 MW=6.0",
            "align": "left",
            "x": "$dataset.0.set.2.centerX - 45",
            "y": "$dataset.0.set.2.starty + 10"
          },
          {
            "id": "CalloutLabel3",
            "type": "Text",
            "fontSize": "12",
            "bold": "0",
            "fillcolor": "#333",
            "text": "N=59 MW=6.0",
            "align": "left",
            "x": "$dataset.0.set.3.centerX - 45",
            "y": "$dataset.0.set.3.starty + 10"
          },
          {
            "id": "CalloutLabel4",
            "type": "Text",
            "fontSize": "12",
            "bold": "0",
            "fillcolor": "#333",
            "text": "N=121 MW=6.1",
            "align": "left",
            "x": "$dataset.0.set.4.centerX - 45",
            "y": "$dataset.0.set.4.starty + 10"
          }
        ]
      }]
    }
  }
}).render();
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- Multi-series line chart -->

<div id="chart-container11a">FusionCharts will render here</div>
<div id="chart-container11b">FusionCharts will render here</div>

0
投票

在 StackedBar 图表中的注释实现中，并未最佳地利用宏，因为您将注释文本放置在第一个数据集（灰色 - #D9D9D9）上，但您在相对于第二个数据集的“x”属性中设置宏数据集（绿色或红色）如下：

"x": "$dataset.1.set.0.X - 320",

这不是一个正确的实现。

您需要在“x”属性中设置与要显示注释的数据集和集合（图）相关的宏。这将帮助您使用相同的填充与相应注释的宏来对齐它们。请参考以下代码：

Plot 1 - "x": "$dataset.0.set.0.STARTX+30",

Plot 2 - "x": "$dataset.0.set.1.STARTX+30",

Plot 3 - "x": "$dataset.0.set.2.STARTX+30",

Plot 4 - "x": "$dataset.0.set.3.STARTX+30",

Plot 5 - "x": "$dataset.0.set.4.STARTX+30",

参考小提琴 - https://jsfiddle.net/zyk2n5f0/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.