добавить редактируемые текстовые поля к определенному datapoint в диаграмме

Я пытаюсь реализовать редактируемые текстовые поля (решение в диаграммах или диаграммах слияния прекрасно). Немного пробовал в fusioncharts, фиксируя событие щелчка пользователя в точке данных с помощью триггера. Проверьте jsfiddle из примера fusionchart ... [dataPlotClick]1 событие. Тем не менее, цель состоит в том, чтобы показать внешнее текстовое поле как модальную форму или что-то еще, записать комментарии пользователя и затем сохранить их в базе данных mysql. Наконец, обновите всплывающую подсказку новыми комментариями для повторной загрузки данных диаграммы. Любые входы полезны. Ниже приводится то, что у меня есть.добавить редактируемые текстовые поля к определенному datapoint в диаграмме

<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 вы сначала извлекаете все данные. Добавьте/измените его, произнесите значение инструмента для него и обновите диаграмму, используя метод 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

Hi ayan, спасибо вам за решение. Но я попробовал подсказку и не нашел ее полезной. Текстовая область, такая как текстовое поле, - это то, что я ищу ... вызов div, открытие текстового поля и захват значений и сохранение его обратно в базу данных. – user5249203

Да, вы можете сделать это в своем обратном вызове. Попробуйте загрузочные модалы. Я думаю, они подойдут вам. (Http://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp). – Ayan

добавить редактируемые текстовые поля к определенному datapoint в диаграмме

ответ

Смежные вопросы