將可編輯文本框添加到圖表中的特定數據點

我試圖實現可編輯文本框（在chartjs或融合圖表中的解決方案都很好）。在融合圖中使用觸發器在數據點上捕獲用戶單擊事件中嘗試了一下。檢查jsfiddle從fusionchart示例這裏... [dataPlotClick]1事件。但是，目標是將外部文本框顯示爲模式窗體或其他內容，記錄用戶註釋，然後將它們存儲在mysql數據庫中。最後，用新註釋更新工具提示以重新載入海圖數據。任何輸入都很有幫助。以下是我的。將可編輯文本框添加到圖表中的特定數據點

<html> 
<head> 
<title>My first chart using FusionCharts Suite XT</title> 
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script> 
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script> 
<script type="text/javascript"> 
    FusionCharts.ready(function(){ 
    var fusioncharts = new FusionCharts({ 
    type: 'msline', 
    renderAt: 'chart-container', 
    width: '500', 
    height: '300', 
    dataFormat: 'json', 
    dataSource: { 
     "chart": { 
      "paletteColors": "#0075c2,#1aaf5d", 
      "bgcolor": "#ffffff", 
      "showBorder": "0", 
      "showShadow": "0", 
      "showCanvasBorder": "0", 
      "usePlotGradientColor": "0", 
      "legendBorderAlpha": "0", 
      "legendShadow": "0", 
      "showAxisLines": "0", 
      "showAlternateHGridColor": "0", 
      "divlineThickness": "1", 
      "divLineIsDashed": "1", 
      "divLineDashLen": "1", 
      "divLineGapLen": "1", 
      "xAxisName": "Day", 
      "showValues": "0" 
     }, 
     "categories": [{ 
      "category": [{ 
       "label": "1" 
      }, { 
       "label": "2" 
      }, { 
       "label": "3" 
      }, { 
       "label": "4" 
      }] 
     }], 
     "dataset": [{ 
      "seriesname": "Bakersfield Central", 
      "data": [{ 
       "value": "30", 
       "toolText" : 'this value is 30' 
      }, { 
       "value": "25", 
       "toolText" : 'below expectation', 
      }, { 
       "value": "30", 
       "toolText" : 'this value expected' 
      }, { 
       "value": "35", 
       "toolText" : 'exceeds' 
      }] 
     }], 
     "trendlines": [{ 
      "line": [{ 
       "startvalue": "30", 
       "color": "#6baa01", 
       "valueOnRight": "1", 
       "displayvalue": "Average" 
      }] 
    }]}, 
     "events": { 

     "dataPlotClick": function (eventObj, dataObj) { 
     console.log(dataObj); 
     var data_index = dataObj['dataIndex']; 
     var tool_text = dataObj['toolText']; 
     alert(data_index); 
     alert(tool_text);  
      } 
     } 
}).render(); 
}); 
</script> 
</head> 
<body> 
    <div id="chart-container">FusionCharts XT will load here!</div> 
</body> 
</html>

來源

2016-12-16 user5249203

您可以使用getJSONData和setJSONData來獲取和設置您的數據。在每個dataPlotClick事件中，您首先獲取整個數據。附加/修改它，說出它的tooltext值並使用setJSONData方法更新圖表。請參閱本下面的代碼片段或本fiddle：

FusionCharts.ready(function() { 
 
    var revenueChart = new FusionCharts({ 
 
    type: 'column2d', 
 
    renderAt: 'chart-container', 
 
    width: '500', 
 
    height: '350', 
 
    dataFormat: 'json', 
 
    dataSource: { 
 
     "chart": { 
 
     "caption": "Monthly revenue for last year", 
 
     "subCaption": "Harry's SuperMart", 
 
     "xAxisName": "Month", 
 
     "yAxisName": "Revenue (In USD)", 
 
     "numberPrefix": "$", 
 
     "paletteColors": "#0075c2", 
 
     "bgColor": "#ffffff", 
 
     "borderAlpha": "20", 
 
     "canvasBorderAlpha": "0", 
 
     "usePlotGradientColor": "0", 
 
     "plotBorderAlpha": "10", 
 
     "placevaluesInside": "1", 
 
     "rotatevalues": "1", 
 
     "valueFontColor": "#ffffff", 
 
     "showXAxisLine": "1", 
 
     "xAxisLineColor": "#999999", 
 
     "divlineColor": "#999999", 
 
     "divLineIsDashed": "1", 
 
     "showAlternateHGridColor": "0", 
 
     "subcaptionFontBold": "0", 
 
     "subcaptionFontSize": "14" 
 
     }, 
 
     "data": [{ 
 
     "label": "Jan", 
 
     "value": "420000" 
 
     }, { 
 
     "label": "Feb", 
 
     "value": "810000" 
 
     }, { 
 
     "label": "Mar", 
 
     "value": "720000" 
 
     }, { 
 
     "label": "Apr", 
 
     "value": "550000" 
 
     }, { 
 
     "label": "May", 
 
     "value": "910000" 
 
     }, { 
 
     "label": "Jun", 
 
     "value": "510000" 
 
     }, { 
 
     "label": "Jul", 
 
     "value": "680000" 
 
     }, { 
 
     "label": "Aug", 
 
     "value": "620000" 
 
     }, { 
 
     "label": "Sep", 
 
     "value": "610000" 
 
     }, { 
 
     "label": "Oct", 
 
     "value": "490000" 
 
     }, { 
 
     "label": "Nov", 
 
     "value": "900000" 
 
     }, { 
 
     "label": "Dec", 
 
     "value": "730000" 
 
     }] 
 
    }, 
 
    "events": { 
 

 
     /** 
 
     * @description 
 
     * Triggered when a data plot is clicked. 
 
     * 
 
     * @param {Object} eventObj: An object containing all the details related to this event like eventId, sender, etc. 
 
     * @param {Object} dataObj: An object containing all the details related to chart data, such as the chart ID, index and data value of the clicked data plot. 
 
     */ 
 

 
     "dataPlotClick": function(eventObj, dataObj) { 
 
     var data_index = dataObj['dataIndex'], 
 
      sender = eventObj.sender, 
 
      JSONData = sender.getJSONData(); 
 
     JSONData.data[data_index].toolText = prompt("Enter text here"); 
 
     sender.setJSONData(JSONData); 
 
     } 
 
    } 
 
    }).render(); 
 
});

body { 
 
    padding: 5px; 
 
    margin: 0 auto; 
 
} 
 
#header { 
 
    display: none; 
 
} 
 
#indicatorDiv { 
 
    width: 500px; 
 
    font-family: 'Arial', 'Helvetica'; 
 
    font-size: 14px; 
 
} 
 
p { 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
} 
 
#attrs-table { 
 
    text-align: center; 
 
    width: 500px; 
 
} 
 
.parameter-name, 
 
.parameter-value { 
 
    width: 250px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    float: left; 
 
} 
 
.title, 
 
.value { 
 
    float: left; 
 
    width: 230px; 
 
    height: 20px; 
 
    background: #fff; 
 
    padding: 5px 10px; 
 
} 
 
.title { 
 
    clear: left; 
 
} 
 
.title:nth-child(4n+1), 
 
.value:nth-child(4n+2) { 
 
    background: rgb(0, 117, 194); 
 
    color: #fff; 
 
} 
 
.value { 
 
    word-wrap: break-word; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
}

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script> 
 
<!-- This sample shows the event parameters, and their values, when dataplotClick event is triggered--> 
 
<div id="indicatorDiv">Event name: <b> dataplotClick </b> 
 
    <br> 
 
    <br>Triggered when a data plot is clicked.</br> 
 
    <br>All events, when triggered, will provide two parameters for the handler - <b> eventObj </b> (object containing information generic to all events) and <b> dataObj </b> (object containing information specific to an event).</br>br> Click any of the data plots 
 
    to trigger the event. Scroll down to the table rendered below the chart to view information contained in the dataObj object. To view information contained in the eventObj object, open the console.</br> 
 
    </br> 
 
</div> 
 
<div id="chart-container">FusionCharts will render here</div> 
 
<div> 
 
    <div> 
 
    <div id="header"> 
 
     <div class="parameter-name">Parameter Name</div> 
 
     <div class="parameter-value">Parameter Value</div> 
 
    </div> 
 
    <div id="attrs-table"></div> 
 
    </div> 
 
</div>

所以你看，這裏單擊列，一個提示框打開（如示例代碼有人說）你輸入的內容提示轉到該索引列的工具文本。您可以執行其他操作，例如錄製新用戶註釋或將其保存在數據庫中。

來源

2016-12-17 05:21:26 Ayan

嗨阿彥，謝謝他們的解決方案。但是，我嘗試了提示，並沒有發現它很有用。像文本框這樣的文本區域是我正在尋找的......調用一個div，打開一個文本框並捕獲這些值並將其保存回數據庫。 – user5249203

是的，你可以在你的事件回調中做到這一點。嘗試引導模式。我認爲他們會符合你的要求。（http://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp）。 – Ayan

將可編輯文本框添加到圖表中的特定數據點

回答

相關問題