个人中心
gpt4 book ai didi

javascript - 将可编辑的文本框添加到图表中的特定数据点

转载 作者：行者123 更新时间：2023-11-29 23:58:24 25 4
gpt4 key购买 nike

我正在尝试实现可编辑的文本框(chartjs 或融合图表中的解决方案都很好)。尝试在 fusioncharts 中使用触发器捕获数据点上的用户点击事件。在此处检查来自 fusionchart 示例的 jsfiddle...[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>

最佳答案

您可以使用 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>

所以你看，在这里点击一列，一个提示框打开(如你的示例代码中所说)你在提示中输入的内容将转到该索引列的工具文本。您可以进行其他操作，例如记录新的用户评论或将其保存在数据库中。

关于javascript - 将可编辑的文本框添加到图表中的特定数据点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41192531/

25 4 0
文章推荐： javascript - momentJS-timezone 始终显示 UTC 时间
文章推荐： android - İnflater 错误 Edittext while version has changed
文章推荐： php - 当php mysql中删除类别及其子类别时，如何更新帖子类别关系？
文章推荐： javascript - 顶点 : Adding Select List to Tabular Form and then processing based on values
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com