单击事件后显示图表

时间:2017-01-16 12:21:57

标签: javascript jquery charts amcharts

我正在玩amcharts

虽然我能够让this example在启动时工作,但在点击事件后执行此功能时,图表不会显示。正在调用函数本身(void DFS_Traversal(cv::Mat &InputMat, cv::Mat &LabelMat, cv::Point2i cur_SP, int Thresh, int cur_Label){ if (cur_SP.y > 2 && cur_SP.y < (InputMat.rows - 2) && cur_SP.x > 2 && cur_SP.x < (InputMat.cols - 2)){ uchar* pre_Input_rowPtr = InputMat.ptr<uchar>(cur_SP.y - 1); uchar* cur_Input_rowPtr = InputMat.ptr<uchar>(cur_SP.y); uchar* next_Input_rowPtr = InputMat.ptr<uchar>(cur_SP.y + 1); uchar* pre_Label_rowPtr = LabelMat.ptr<uchar>(cur_SP.y - 1); uchar* cur_Label_rowPtr = LabelMat.ptr<uchar>(cur_SP.y); uchar* next_Label_rowPtr = LabelMat.ptr<uchar>(cur_SP.y + 1); //cur_Label_rowPtr[cur_SP.x] = cur_Label; //Left Point if ( cur_Label_rowPtr[cur_SP.x - 1] == 0 && std::abs(cur_Input_rowPtr[cur_SP.x] - cur_Input_rowPtr[cur_SP.x - 1]) < Thresh){ cv::Point2i left_Point(cur_SP.x - 1, cur_SP.y); cur_Label_rowPtr[cur_SP.x - 1] = cur_Label; DFS_Traversal(InputMat, LabelMat, left_Point, Thresh, cur_Label); } //Right Point if ( cur_Label_rowPtr[cur_SP.x + 1] == 0 && std::abs(cur_Input_rowPtr[cur_SP.x] - cur_Input_rowPtr[cur_SP.x + 1]) < Thresh){ cv::Point2i right_Point(cur_SP.x + 1, cur_SP.y); cur_Label_rowPtr[cur_SP.x + 1] = cur_Label; DFS_Traversal(InputMat, LabelMat, right_Point, Thresh, cur_Label); } //Up Point if ( pre_Label_rowPtr[cur_SP.x] == 0 && std::abs(cur_Input_rowPtr[cur_SP.x] - pre_Input_rowPtr[cur_SP.x]) < Thresh){ cv::Point2i up_Point(cur_SP.x, cur_SP.y - 1); pre_Label_rowPtr[cur_SP.x] = cur_Label; DFS_Traversal(InputMat, LabelMat, up_Point, Thresh, cur_Label); } //Down Point if ( next_Label_rowPtr[cur_SP.x] == 0 && std::abs(cur_Input_rowPtr[cur_SP.x] - next_Input_rowPtr[cur_SP.x]) < Thresh){ cv::Point2i down_Point(cur_SP.x, cur_SP.y + 1); next_Label_rowPtr[cur_SP.x] = cur_Label; DFS_Traversal(InputMat, LabelMat, down_Point, Thresh, cur_Label); } } return; } 正在打印到控制台中),但图表不会出现。

function called

这是fiddle

1 个答案:

答案 0 :(得分:1)

如果您自己调用show函数,则不需要AmCharts.ready函数:

function show() {
  var chart;

  var chartData = [{
    "ax": 1,
    "ay": 0.5,
    "bx": 1,
    "by": 2.2
  }, {
    "ax": 2,
    "ay": 1.3,
    "bx": 2,
    "by": 4.9
  }, {
    "ax": 3,
    "ay": 2.3,
    "bx": 3,
    "by": 5.1
  }, {
    "ax": 4,
    "ay": 2.8,
    "bx": 4,
    "by": 5.3
  }, {
    "ax": 5,
    "ay": 3.5,
    "bx": 5,
    "by": 6.1
  }, {
    "ax": 6,
    "ay": 5.1,
    "bx": 6,
    "by": 8.3
  }, {
    "ax": 7,
    "ay": 6.7,
    "bx": 7,
    "by": 10.5
  }, {
    "ax": 8,
    "ay": 8,
    "bx": 8,
    "by": 12.3
  }, {
    "ax": 9,
    "ay": 8.9,
    "bx": 9,
    "by": 14.5
  }, {
    "ax": 10,
    "ay": 9.7,
    "bx": 10,
    "by": 15
  }, {
    "ax": 11,
    "ay": 10.4,
    "bx": 11,
    "by": 18.8
  }, {
    "ax": 12,
    "ay": 11.7,
    "bx": 12,
    "by": 19
  }];

  // XY CHART
  chart = new AmCharts.AmXYChart();

  chart.dataProvider = chartData;
  chart.startDuration = 1;

  // AXES
  // X
  var xAxis = new AmCharts.ValueAxis();
  xAxis.title = "X Axis";
  xAxis.position = "bottom";
  xAxis.dashLength = 1;
  xAxis.axisAlpha = 0;
  xAxis.autoGridCount = true;
  chart.addValueAxis(xAxis);

  // Y
  var yAxis = new AmCharts.ValueAxis();
  yAxis.position = "left";
  yAxis.title = "Y Axis";
  yAxis.dashLength = 1;
  yAxis.axisAlpha = 0;
  yAxis.autoGridCount = true;
  chart.addValueAxis(yAxis);

  // GRAPHS
  // triangles up
  var graph1 = new AmCharts.AmGraph();
  graph1.lineColor = "#FF6600";
  graph1.balloonText = "x:[[x]] y:[[y]]";
  graph1.xField = "ax";
  graph1.yField = "ay";
  graph1.lineAlpha = 0;
  graph1.bullet = "triangleUp";
  chart.addGraph(graph1);

  // triangles down
  var graph2 = new AmCharts.AmGraph();
  graph2.lineColor = "#FCD202";
  graph2.balloonText = "x:[[x]] y:[[y]]";
  graph2.xField = "bx";
  graph2.yField = "by";
  graph2.lineAlpha = 0;
  graph2.bullet = "triangleDown";
  chart.addGraph(graph2);

  // first trend line
  var trendLine = new AmCharts.TrendLine();
  trendLine.lineColor = "#FF6600";
  trendLine.initialXValue = 1;
  trendLine.initialValue = 2;
  trendLine.finalXValue = 12;
  trendLine.finalValue = 11;
  chart.addTrendLine(trendLine);

  // second trend line
  trendLine = new AmCharts.TrendLine();
  trendLine.lineColor = "#FCD202";
  trendLine.initialXValue = 1;
  trendLine.initialValue = 1;
  trendLine.finalXValue = 12;
  trendLine.finalValue = 19;
  chart.addTrendLine(trendLine);

  // CURSOR
  var chartCursor = new AmCharts.ChartCursor();
  chart.addChartCursor(chartCursor);

  // SCROLLBAR

  var chartScrollbar = new AmCharts.ChartScrollbar();
  chartScrollbar.scrollbarHeight = 5;
  chartScrollbar.offset = 15
  chart.addChartScrollbar(chartScrollbar);
  // WRITE
  chart.write("chartdiv");
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>

<div id="chartdiv" style="width: 100%; height: 400px;"></div>

<button onclick="show()">
  Show me!
</button>