AmCharts 数据输入 Table 和日期解析不工作

Question

我正在尝试使用 AmCharts 制作一个接受来自 table 数据的图表，用户可以通过它输入日期值和数值。可以从 table.

添加和删除行

<script src="https://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="https://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script>
<div id="chartdiv" style="width: 100%; height: 450px;"></div>
<div id="data-table">
<div class="data-row">
    <input class="data-cell data-category" value="06/16/2016" type="date" />
    <input class="data-cell data-value" value="4000" type="number" step="10" />
    <input class="data-button delete-button" type="button" value="X" />
</div>
<div class="data-row">
    <input class="data-cell data-category" value="07/16/2016" type="date" />
    <input class="data-cell data-value" value="1882" type="number" step="10" />
    <input class="data-button delete-button" type="button" value="X" />
</div>
<div class="data-row">
    <input class="data-cell data-category" value="08/16/2016" type="date" />
    <input class="data-cell data-value" value="1809" type="number" step="10" />
    <input class="data-button delete-button" type="button" value="X" />
</div>
<div class="data-row">
    <input class="data-cell data-category" value="09/26/2016" type="date" />
    <input class="data-cell data-value" value="1322" type="number" step="10" />
    <input class="data-button delete-button" type="button" value="X" />
</div>
<div class="data-row">
    <input class="data-cell data-category" value="10/26/2016" type="date" />
    <input class="data-cell data-value" value="1122" type="number" step="10" />
    <input class="data-button delete-button" type="button" value="X" />
</div>
</div>
<br />
<input type="button" value="Add Row" onclick="addRow()" class="data-button" id="add-row" />

这段代码给我的输出看起来像这样， in which the table date values aren't displayed on the table, but rather the default mm/dd/yyyy is shown instead.

此外，当我在 table 中输入日期时，无论我输入什么日期，图表都会将值绘制成 1901 年 7 月 31 日的日期，我假设是 AmCharts ' 默认日期值。这是图表的代码。

var chart;

AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = generateChartData();
chart.categoryField = "date";
chart.marginRight = 0;
chart.marginTop = 0;
chart.autoMarginOffset = 0;
chart.depth3D = 0;
chart.angle = 0;
chart.dataDateFormat = "MM-DD-YYYY";
chart.theme = "patterns";

// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 60;
categoryAxis.gridPosition = "start";
categoryAxis.dashLength = 1;
categoryAxis.parseDates = true;
categoryAxis.minorGridEnabled = true;

// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title;
valueAxis.dashLength = 10;
chart.addValueAxis(valueAxis);

// GRAPH            
var graph = new AmCharts.AmGraph();
graph.valueField = "value";
graph.colorField = "color";
graph.balloonText = "[[category]]: [[value]]";
graph.type = "smoothedLine";
graph.lineAlpha = 2;
graph.fillAlphas = 0;
chart.addGraph(graph);

// WRITE
chart.write("chartdiv");
});

function addRow() {
jQuery('<div class="data-row"><input class="data-cell data-category" type="date"/><input class="data-cell data-value" type="number" step="10"/><input class="data-button delete-button" type="button" value="X"/></div>').appendTo('#data-table').each(function () {initRowEvents(jQuery(this));});
}

function generateChartData() {
var chartData = [];
jQuery('.data-row').each(function () {
    var date = jQuery(this).find('.data-category').val();
    var value = jQuery(this).find('.data-value').val();
    if (date != '') {
        chartData.push({
            date: date,
            value: value
        });
    }
});
return chartData;
}

function initRowEvents(scope) {
scope.find('.data-cell')
    .attr('title', 'Click to edit')
    .on('keypress keyup change', function () {
        // re-generate chart data and reload it in chart
        chart.dataProvider = generateChartData();
        chart.validateData();
    }).end().find('.delete-button').click(function () {
        // remove the row
        $(this).parents('.data-row').remove();

        // re-generate chart data and reload it in chart
        chart.dataProvider = generateChartData();
        chart.validateData();
    });
}

jQuery(function () {
// initialize the table
initRowEvents(jQuery(document));
});

除此问题外，我还无法向链接图像中的 table 添加行。 "Add Row" 按钮不起作用，但删除行的 "X" 按钮起作用。我觉得这可能是 jsfiddle 的问题，因为我在 jsfiddle 上的代码是私有的，而不是 public。

我提供的代码基于 this jsfiddle.

编辑：我将 equalSpacing 设置为 true，但现在最早的日期绘制在 1901 年 7 月 31 日，而之后的日期绘制在 7 月 31 日之后，这部分解决了我的问题，但没有完全解决。

Answer 1

我能够解决日期解析问题，但无法解决 "Add Row" 按钮问题。简而言之，我所做的就是为我的 table 调整 HTML5 日期值格式，因为它输入错误为 YYYY-MM-DD 格式，我将图表的 dataDateFormat 更改为 YYYY-MM -DD，它允许它工作并解析正确的日期而不是默认日期。

AmCharts 数据输入 Table 和日期解析不工作

AmCharts Data Entry Table and Date Parsing Not Working

html

javascript

jquery

amcharts