天经文生产图表（剑道/谷歌图表/融合图表）

Question

我正在尝试为不同的油井建立一个多线图，它将显示天数与生产量，下面是数据格式： -

WellNo  Days  OIL
15668   23    2256
15668   48    2859

17442   31    574
17442   61    1556

19017   23    870
19017   53    3377

目前我尝试了如下所示的剑道折线图： -

$("#chart").kendoChart({
   seriesDefaults: {
      tooltip: {
          visible: true,
      },
      type: "line",
      aggregate: "avg",
      field: "Day",
      categoryField: "OP"
     },
       series: [{
         name: "15668",
         data: [{ Day: 23, OP: 2256 }, { Day: 48, OP: 2859 }]
       },{
         name: "17442",
         data: [{ Da: 31, OP: 574 }, { Da: 61, OP: 1556}]
       },{
         name: "19017",
         data: [{ Da: 23, OP: 870}, { Da: 53, OP: 3377 }]
       }],
       categoryAxis: {                   
        }
});   

但输出如下图所示： -

X Axis未对齐/不按顺序排列。我希望它应该按升序排列，如1,2,3。

目前我在剑道图表中试用它，但如果可能，我可以使用另一张图表。

Answer 1

这是使用FusionCharts实现的。沿X轴对齐似乎没有问题。

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'msline',
    renderAt: 'chart-container',
    width: '550',
    height: '350',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fint"
      },
      "categories": [{
        "category": [{
          "label": "2256"
        }, {
          "label": "2859"
        }, {
          "label": "574"
        }, {
          "label": "1556"
        }, {
          "label": "870"
        }, {
          "label": "3377"
        }]
      }],
      "dataset": [{
        "seriesname": "15668",
        "data": [{
          "value": "23"
        }, {
          "value": "48"
        }, {
          "value": ""
        }, {
          "value": ""
        }, {
          "value": ""
        }, {
          "value": ""
        }]
      }, {
        "seriesname": "17442",
        "data": [{
          "value": ""
        }, {
          "value": ""
        }, {
          "value": "31"
        }, {
          "value": "61"
        }, {
          "value": ""
        }, {
          "value": ""
        }]
      }, {
        "seriesname": "19017",
        "data": [{
          "value": ""
        }, {
          "value": ""
        }, {
          "value": ""
        }, {
          "value": ""
        }, {
          "value": "23"
        }, {
          "value": "53"
        }]
      }]
    }
  }).render();
});

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.theme.fint.js"></script>

<!-- Column 2D chart showing Monthly revenues for last year -->
<div id="chart-container">FusionCharts will render here</div>