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

Я пытаюсь реализовать редактируемые текстовые поля (решение в диаграммах или диаграммах слияния прекрасно). Немного пробовал в fusioncharts, фиксируя событие щелчка пользователя в точке данных с помощью триггера. Проверьте 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>

ОТВЕТЫ

Ответ 1

Вы можете использовать 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 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>