Zingchart多个区域图无法正确呈现

时间:2018-10-28 20:27:35

标签: javascript charts zingchart

我正在尝试将两个系列添加到面积图中(x =日期,y =值)。如果Serie 2包含一些在Serie 1中不可用的日期,则图表以一种奇怪的方式呈现:

Example here

似乎“丢失”值显示在轴的末端而不是正确的位置。点以正确的顺序连接,使图表看起来很奇怪。谁能建议如何解决这个问题?

以下是配置的摘录:

var chartConfig = {
  "graphset": [
    {
      "type": "area",
      "plot": {
        "marker": {
          "visible": false,
        },
      },
      "scale-y": {
        "min-value": "auto",
      },
      "crosshair-x": {
        "plot-label": {
          "text": "%t: <strong>%v</strong><br>on <strong>%kl</strong><br>",
          "border-radius": 5,
          "padding": "8px"
        }
      },
      "series": [
        {
          "values": [["2018-03-29", 10562.78], ["2018-04-03", 10331.93], ["2018-04-04", 10362.58], ["2018-04-05", 10466.04], ["2018-04-06", 10333.85], ["2018-04-09", 10339.52], ["2018-04-10", 10337.15], ["2018-04-11", 10340.46], ["2018-04-12", 10343.77], ["2018-04-13", 10341.88], ["2018-04-16", 10341.41], ["2018-04-17", 10337.15], ["2018-04-18", 10341.41], ["2018-04-19", 10348.5], ["2018-04-20", 10350.39], ["2018-04-23", 10350.86], ["2018-04-24", 10352.75], ["2018-04-25", 10234.46], ["2018-04-26", 10447.2], ["2018-04-27", 10456.74], ["2018-04-30", 10569.31], ["2018-05-02", 10557.86], ["2018-05-04", 10748.66], ["2018-05-07", 10932.78]],
          "text": `Chart 1`
        },
        {
          "values": [["2018-03-29", 9834.71], ["2018-04-02", 9878.97], ["2018-04-03", 9747.58], ["2018-04-04", 9586.74], ["2018-04-06", 9833.36], ["2018-04-09", 9794.03], ["2018-04-10", 9918.41], ["2018-04-11", 9910.48], ["2018-04-12", 9989.76], ["2018-04-13", 10083.66], ["2018-04-16", 10047.36], ["2018-04-17", 10132.76], ["2018-04-18", 10240.17], ["2018-04-19", 10192.04], ["2018-04-20", 10138.02], ["2018-04-23", 10072.12], ["2018-04-24", 10053.99], ["2018-04-25", 9837.83], ["2018-04-26", 9936.21], ["2018-04-27", 10095.19], ["2018-04-30", 10008.37], ["2018-05-01", 9894.27], ["2018-05-02", 10012.01], ["2018-05-03", 9907.89], ["2018-05-04", 9908.88], ["2018-05-07", 10149.67]],
          "text": `Chart 2`
        }
      ]
    }
  ]
};

zingchart.render({
  id: "chart-example",
  data: chartConfig,
});

0 个答案:

没有答案