期间空间图表

Question

我使用库amchart生成带有插件dataLoader的图表。 但是每次图表的开始和结束都无缘无故地有一天。 有人已经收到此错误了吗？

-编辑领域-

我使用amchart的示例数据创建了一个小提琴，您可以在此处找到。 我只是将图表类型更改为“线”，将默认时段更改为“ 10D”，并且您可以看到，图表右侧仍然有一个空格（如果更改时段，左侧也是如此）。 可以擦除吗？

 var chart = AmCharts.makeChart( "chartdiv", { "type": "stock", "theme": "none", //"color": "#fff", "dataSets": [ { "title": "MSFT", "fieldMappings": [ { "fromField": "Open", "toField": "open" }, { "fromField": "High", "toField": "high" }, { "fromField": "Low", "toField": "low" }, { "fromField": "Close", "toField": "close" }, { "fromField": "Volume", "toField": "volume" } ], "compared": false, "categoryField": "Date", /** * data loader for data set data */ "dataLoader": { "url": "https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT.csv", "format": "csv", "showCurtain": true, "showErrors": true, "async": true, "reverse": true, "delimiter": ",", "useColumnNames": true }, /** * data loader for events data */ "eventDataLoader": { "url": "https://www.amcharts.com/wp-content/uploads/assets/stock/MSFT_events.csv", "format": "csv", "showCurtain": true, "showErrors": true, "async": true, "reverse": true, "delimiter": ",", "useColumnNames": true, "postProcess": function( data ) { for ( var x in data ) { switch ( data[ x ].Type ) { case 'A': var color = "#85CDE6"; break; default: var color = "#cccccc"; break; } data[ x ] = { "type": "pin", "graph": "g1", "backgroundColor": color, "date": data[ x ].Date, "text": data[ x ].Type, "description": "<strong>" + data[ x ].Title + "</strong><br />" + data[ x ].Description }; } return data; } } }, { "title": "TXN", "fieldMappings": [ { "fromField": "Open", "toField": "open" }, { "fromField": "High", "toField": "high" }, { "fromField": "Low", "toField": "low" }, { "fromField": "Close", "toField": "close" }, { "fromField": "Volume", "toField": "volume" } ], "compared": true, "categoryField": "Date", "dataLoader": { "url": "https://www.amcharts.com/wp-content/uploads/assets/stock/TXN.csv", "format": "csv", "showCurtain": true, "showErrors": true, "async": true, "reverse": true, "delimiter": ",", "useColumnNames": true } } ], "dataDateFormat": "YYYY-MM-DD", "panels": [ { "title": "Value", "percentHeight": 70, "stockGraphs": [ { "type": "line", "id": "g1", "openField": "open", "closeField": "close", "highField": "high", "lowField": "low", "valueField": "close", "lineColor": "#fff", "fillColors": "#fff", "negativeLineColor": "#db4c3c", "negativeFillColors": "#db4c3c", "fillAlphas": 1, "comparedGraphLineThickness": 2, "columnWidth": 0.7, "useDataSetColors": false, "comparable": true, "compareField": "close", "showBalloon": false, "proCandlesticks": true } ], "stockLegend": { "valueTextRegular": undefined, "periodValueTextComparing": "[[percents.value.close]]%" } }, { "title": "Volume", "percentHeight": 30, "marginTop": 1, "columnWidth": 0.6, "showCategoryAxis": false, "stockGraphs": [ { "valueField": "volume", "openField": "open", "type": "column", "showBalloon": false, "fillAlphas": 1, "lineColor": "#fff", "fillColors": "#fff", "negativeLineColor": "#db4c3c", "negativeFillColors": "#db4c3c", "useDataSetColors": false } ], "stockLegend": { "markerType": "none", "markerSize": 0, "labelText": "", "periodValueTextRegular": "[[value.close]]" }, "valueAxes": [ { "usePrefixes": true } ] } ], "panelsSettings": { // "color": "#fff", "plotAreaFillColors": "#333", "plotAreaFillAlphas": 1, "marginLeft": 60, "marginTop": 5, "marginBottom": 5 }, "chartScrollbarSettings": { "graph": "g1", "graphType": "line", "usePeriod": "WW", "backgroundColor": "#333", "graphFillColor": "#666", "graphFillAlpha": 0.5, "gridColor": "#555", "gridAlpha": 1, "selectedBackgroundColor": "#444", "selectedGraphFillAlpha": 1 }, "categoryAxesSettings": { "equalSpacing": true, "gridColor": "#555", "gridAlpha": 1 }, "valueAxesSettings": { "gridColor": "#555", "gridAlpha": 1, "inside": false, "showLastLabel": true }, "chartCursorSettings": { "pan": true, "valueLineEnabled": true, "valueLineBalloonEnabled": true }, "legendSettings": { //"color": "#fff" }, "stockEventsSettings": { "showAt": "high", "type": "pin" }, "balloon": { "textAlign": "left", "offsetY": 10 }, "periodSelector": { "position": "bottom", "periods": [ { "period": "DD", "count": 10, "label": "10D", "selected": true }, { "period": "MM", "count": 1, "label": "1M" }, { "period": "MM", "count": 6, "label": "6M" }, { "period": "YYYY", "count": 1, "label": "1Y" }, { "period": "YYYY", "count": 2, "label": "2Y" }, /* { "period": "YTD", "label": "YTD" },*/ { "period": "MAX", "label": "MAX" } ] } } ); 

 body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } #chartdiv { width : 100%; height : 500px; } 

 <script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/serial.js"></script> <script src="https://www.amcharts.com/lib/3/amstock.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> <div id="chartdiv"></div> 

Answer 1

最后，

在"categoryAxesSettings":示例中"categoryAxesSettings":将"startOnAxis"更改为true

"categoryAxesSettings": {
    "equalSpacing": true,
    "gridColor": "#555",
    "gridAlpha": 1,
    "startOnAxis" : true,  // add this line
  },

遵循此文档： https : //docs.amcharts.com/3/javascriptstockchart/CategoryAxis#startOnAxis