Положение текста в FusionCharts в stackedbar2d

У меня есть несколько 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
person Shenya    schedule 03.03.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, вы уже близко подошли к своей реализации. Возможно, вы захотите узнать больше о макросах из здесь Я не совсем уверен в том, какой именно визуальный эффект вы хотите наконец достичь, но это мое предположение - вы хотите разместить эти аннотированные тексты где-нибудь внутри серой части. Простые модификации показаны во фрагменте ниже:

  • Использовать макрос $ centerX
  • Вычитаем 45, потому что вся ширина этого текста была близка к 90. Таким образом, вычитание (90/2 = 45) делает его центром.
  • Я не был уверен, почему во всех записях использовался один и тот же набор. $dataset.1.set.0. Поскольку данные являются динамическими, попробуйте использовать соответствующий индекс набора
  • Еще одно предложение по поводу повторяющегося идентификатора, обнаруженного внутри аннотированных групп. Идентификаторы должны быть уникальными, верно :)

//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>

person Ayan    schedule 18.03.2018