icCube 7.0.0版本多色带仪表盘配置问题求助

I've successfully built a gauge with red (error, 0-0.6) and green (good, 0.6-1) color bands using the AmCharts online editor, but I can't get the same setup to work in icCube Reporting 7.0.0 (build 5549). Here's my full chart configuration JSON:

{ "box": { "id": "wb695", "widgetAdapterId": "w28", "rectangle": { "left": 1510, "top": 340, "right": 1910, "bottom": 640 }, "zIndex": 901 }, "data": { "mode": "MDX", "schemaSettings": { "cubeName": null, "schemaName": null }, "options": { "WIZARD": { "measures": [], "rows": [], "rowsNonEmpty": false, "columns": [], "columnsNonEmpty": false, "filter": [] }, "MDX": { "statement": "with \n member [Measures].[Measure1] AS 0.9\n member [Measures].[Measure2] AS 0.1\nSELECT\n\n{[Measures].[Measure1], [Measures].[Measure2]} on 0\n\nFROM [cube]" }, "DATASOURCE": {} }, "ic3_name": "mdx Query-5", "ic3_uid": "m17" }, "data-render": { "chartType": { "label": "Gauge", "proto": { "chartPrototype": { "type": "gauge", "arrows": [ { "id": "GaugeArrow-1" } ], "axes": [ { "id": "GaugeAxis-1" } ] }, "graphPrototype": {}, "dataProviderType": 3 }, "id": "gauge-chart" }, "graphsConfiguration": [ { "graph": {} } ], "valueAxes": [], "trendLinesGuides": {}, "configuredQuadrants": {}, "advanced": { "titles": [], "faceAlpha": 0, "faceBorderAlpha": 0 }, "balloon": { "offsetX": 8 }, "chartOptions": { "axes": [ { "axisAlpha": 0.25, "bottomText": "SLA", "bottomTextColor": "#2A3F56", "tickAlpha": 0.25, "bandOutlineAlpha": 1, "bandAlpha": 1, "bandOutlineThickness": 95, "bandOutlineColor": "#0095BC", "id": 1 } ], "bands": [ { "alpha": 0.8, "color": "#B53728", "endValue": 0.6, "startValue": 0, "id": "GaugeBand-1" }, { "alpha": 0.6, "color": "#435035", "endValue": 1, "startValue": 0.6, "innerRadius": 0.69, "id": "GaugeBand-2" } ] }, "ic3Data": { "chartTypeConfig": { "pie-chart-donut": { "chartType": { "label": "Donut", "proto": { "chartPrototype": { "type": "donut", "pullOutRadius": 0, "startDuration": 0, "legend": { "enabled": false, "align": "center", "markerType": "circle" }, "innerRadius": "60%" }, "dataProviderType": 1 }, "id": "pie-chart-donut" }, "graphsConfiguration": [ {} ], "valueAxes": [], "trendLinesGuides": {}, "configuredQuadrants": {}, "advanced": { "titles": [] }, "balloon": { "offsetX": 8 }, "chartOptions": { "showZeroSlices": false, "labelsEnabled": false, "innerRadius": "60%", "startAngle": 270, "radius": "", "fontSize": 20, "color": "#0095BC", "outlineAlpha": 0.25, "tapToActivate": false } } } }, "axes": [ { "startValue": 0, "endValue": 1, "startAngle": -90, "endAngle": 90 } ], "valueFormatting": "" }, "navigation": { "menuVisibility": { "back": true, "axisXChange": "All", "axisYChange": "All", "filter": "All", "reset": true, "widget": true, "others": "All" }, "selectionMode": "disabled" }, "events": {}, "filtering": {}, "hooks": {} }

After digging into icCube's AmCharts integration specifics, here are the key issues and fixes:

Key Issues in Your Configuration #

• Misplaced Color Bands: In icCube, gauge bands need to be nested inside the corresponding axis object, not at the top level of chartOptions. The standalone bands array won't be recognized by icCube's rendering engine.
• Conflicting Donut Chart Config: Your ic3Data.chartTypeConfig includes a full donut chart setup, which clashes with the gauge type you're trying to render. This can cause unexpected behavior or render failures.
• Overly Thick Band Outline: The bandOutlineThickness set to 95 is way too large—this will likely cause the outline to overlap or obscure the actual color bands.
• Split Axis Range Config: You have axis range/angle settings in both data-render.axes and chartOptions.axes, which can lead to configuration conflicts.

Fixed Configuration #

Here's the adjusted JSON that should work in icCube Reporting:

{
  "box": {
    "id": "wb695",
    "widgetAdapterId": "w28",
    "rectangle": {
      "left": 1510,
      "top": 340,
      "right": 1910,
      "bottom": 640
    },
    "zIndex": 901
  },
  "data": {
    "mode": "MDX",
    "schemaSettings": {
      "cubeName": null,
      "schemaName": null
    },
    "options": {
      "WIZARD": {
        "measures": [],
        "rows": [],
        "rowsNonEmpty": false,
        "columns": [],
        "columnsNonEmpty": false,
        "filter": []
      },
      "MDX": {
        "statement": "with \n member [Measures].[Measure1] AS 0.9\nSELECT\n{[Measures].[Measure1]} on 0\nFROM [cube]"
      },
      "DATASOURCE": {}
    },
    "ic3_name": "mdx Query-5",
    "ic3_uid": "m17"
  },
  "data-render": {
    "chartType": {
      "label": "Gauge",
      "proto": {
        "chartPrototype": {
          "type": "gauge",
          "arrows": [
            {
              "id": "GaugeArrow-1"
            }
          ],
          "axes": [
            {
              "id": "GaugeAxis-1"
            }
          ]
        },
        "graphPrototype": {},
        "dataProviderType": 3
      },
      "id": "gauge-chart"
    },
    "graphsConfiguration": [
      {
        "graph": {}
      }
    ],
    "valueAxes": [],
    "trendLinesGuides": {},
    "configuredQuadrants": {},
    "advanced": {
      "titles": [],
      "faceAlpha": 0,
      "faceBorderAlpha": 0
    },
    "balloon": {
      "offsetX": 8
    },
    "chartOptions": {
      "axes": [
        {
          "axisAlpha": 0.25,
          "bottomText": "SLA",
          "bottomTextColor": "#2A3F56",
          "tickAlpha": 0.25,
          "bandOutlineAlpha": 1,
          "bandAlpha": 1,
          "bandOutlineThickness": 20,
          "bandOutlineColor": "#0095BC",
          "id": 1,
          "startValue": 0,
          "endValue": 1,
          "startAngle": -90,
          "endAngle": 90,
          "bands": [
            {
              "alpha": 0.8,
              "color": "#B53728",
              "endValue": 0.6,
              "startValue": 0,
              "id": "GaugeBand-1"
            },
            {
              "alpha": 0.6,
              "color": "#435035",
              "endValue": 1,
              "startValue": 0.6,
              "innerRadius": 0.69,
              "id": "GaugeBand-2"
            }
          ]
        }
      ]
    },
    "ic3Data": {
      "chartTypeConfig": {}
    },
    "axes": [],
    "valueFormatting": ""
  },
  "navigation": {
    "menuVisibility": {
      "back": true,
      "axisXChange": "All",
      "axisYChange": "All",
      "filter": "All",
      "reset": true,
      "widget": true,
      "others": "All"
    },
    "selectionMode": "disabled"
  },
  "events": {},
  "filtering": {},
  "hooks": {}
}

Breakdown of Changes #

• Nested Bands in Axis: Moved the bands array inside the axes object in chartOptions—this is how icCube expects gauge bands to be defined.
• Removed Donut Config: Cleared out the unrelated donut chart setup in ic3Data.chartTypeConfig to eliminate conflicts.
• Adjusted Band Outline Thickness: Reduced bandOutlineThickness from 95 to 20 (you can tweak this value to get your desired visual result).
• Simplified MDX Query: Updated the query to return only one measure (Measure1) since gauges typically display a single value—returning two measures can cause rendering issues.
• Consolidated Axis Settings: Moved all axis range and angle settings into chartOptions.axes to avoid configuration splits.

Additional Tips #

• Make sure your icCube Reporting instance has the latest AmCharts plugin installed—older versions may lack support for some gauge features.
• Test the MDX query independently first to ensure it returns the correct single value for the gauge to display.

内容的提问来源于stack exchange，提问作者Niels