Question

我在我的应用程序中使用highchart库来可视化我的数据。我有渲染Line chart，而第一次渲染正确。但是当我修改dateRange时，我将更新的数据传递给折线图功能。但是highcharts渲染折线图。

这些是我的图表选项

     {
    "credits": {
    "enabled": false
     },
     "colors": [
    "#3093d1",
    "#fcb631",
    "#9ad631",
    "#f34ea8",
    "#30bfdd",
    "#fc9532",
    "#9f4bc7",
    "#304ec6",
    "#fcd731",
    "#f08576",
    "#418842"
    ],
    "chart": {
    "plotBackgroundColor": null,
    "plotBorderWidth": null,
    "plotShadow": false,
    "renderTo": {
      "sizzle1448613814074": {
        "parentNode": [
          190,
          49,
          true
        ]
      }
    },
    "subtitle": {
      "text": null
    },
    "tooltip": {
      "shared": true,
      "useHTML": false
    },
    "type": "line"
    },
    "title": {
    "text": null
    },
     "xAxis": {
    "type": "datetime",
    "title": {
      "text": null
    },
    "labels": {},
    "categories": [
      "Oct 28, 2015",
      "Oct 29, 2015",
      "Oct 30, 2015",
      "Oct 31, 2015",
      "Nov 01, 2015",
      "Nov 02, 2015",
      "Nov 03, 2015",
      "Nov 04, 2015",
      "Nov 05, 2015",
      "Nov 06, 2015",
      "Nov 07, 2015",
      "Nov 08, 2015",
      "Nov 09, 2015",
      "Nov 10, 2015",
      "Nov 11, 2015",
      "Nov 12, 2015",
      "Nov 13, 2015",
      "Nov 14, 2015",
      "Nov 15, 2015",
      "Nov 16, 2015",
      "Nov 17, 2015",
      "Nov 18, 2015",
      "Nov 19, 2015",
      "Nov 20, 2015",
      "Nov 21, 2015",
      "Nov 22, 2015",
      "Nov 23, 2015",
      "Nov 24, 2015",
      "Nov 25, 2015",
      "Nov 26, 2015"
    ],
    "crosshair": true,
    "tickInterval": 4
    },
    "yAxis": [
    {
      "labels": {
        "align": "left",
        "x": 0,
        "y": -2
      },
      "title": {
        "text": " "
      },
      "opposite": false,
      "showEmpty": true
    }
    ],
    "plotOptions": {
    "column": {
      "pointPadding": 0,
      "borderWidth": 0
    },
      "pie": {
      "allowPointSelect": true,
      "cursor": "pointer",
      "dataLabels": {
        "enabled": false
      }
    },
    "series": {
      "stacking": "percent"
    }
    },
    "legend": {
    "itemStyle": {
      "font": "9pt Trebuchet MS, Verdana, sans-serif",
      "color": "black",
      "fontWeight": "normal",
      "width": 416
    },
    "itemHoverStyle": {
      "color": "gray"
    },
    "title": "",
    "verticalAlign": "top",
    "borderWidth": 0,
    "enabled": true,
    "adjustChartSize": true
    },
    "series": [
      {
      "name": "shipped_rgm",
      "data": [
        14762955.1,
        19276099.9,
        12988884.9,
        30569084.8,
        24242187.9,
        18379418.8,
        18603495.8,
        18203458.6,
        20938703.3,
        16597939.7,
        20862991.3,
        24023412.9,
        17353371.1,
        17630687.3,
        13725495,
        10981690.9,
        11772224.6,
        15237980.2,
        15214048.4,
        12756909.5,
        13679996.9,
        14433383.5,
        18330217.9,
        13240009.3,
        14947562.6,
        17269289.7,
        14668529,
        15845494.4,
        15551554.6,
        2482537.9
      ],
      "yAxis": 0
    }
    ],
    "navigation": {
    "buttonOptions": {
      "verticalAlign": "top",
      "y": 0,
      "enabled": false
    }
    },
    "exporting": {
    "enabled": false
    },
    "tooltip": {
    "headerFormat": "<span style=\"font-size:10px\">{point.key}</span><table>",
    "pointFormat": "<tr><td style=\"color:{series.color};padding:0\">{series.name}: </td><td style=\"padding:0\"><b>{point.y:,.0f}</b></td></tr>",
    "footerFormat": "</table>",
    "shared": true,
    "useHTML": true
  }
}

任何人都可以帮助我。

Answer 1

您需要评论series.stacking：plotOptions中的百分比

"series": {
"stacking": "percent" //comment it
}

请参阅working fiddle of your code

Highcharts渲染线图在单行

1 个答案: