मैं अपने लाइन चार्ट में लीजेंड पर 'ओवर' इवेंट डालने की कोशिश कर रहा हूं। किंवदंती को मँडराते हुए, मैं किंवदंती से जुड़ी उस विशेष पंक्ति को उजागर करने का प्रयास कर रहा हूँ

मैंने कुछ उदाहरण देखे हैं https:/ /www.amcharts.com/docs/v4/tutorials/highlighting-column-series-on-legend-click/ और https://www.amcharts.com/docs/v4/tutorials/activate-deactivate -ए-पाई-स्लाइस-ऑन-लीजेंड-क्लिक-बजाय-टू-टॉगलिंग/

और मैं 'माउस ओवर' लीजेंड पर लाइन चार्ट के लिए इसी तरह की चीज का अनुकरण करने की कोशिश कर रहा हूं।

chart.legend = new am4charts.Legend();
chart.legend.markers.template.width = 40;
chart.legend.markers.template.height = 10;

chart.legend.itemContainers.template.events.on("over", function(ev) {
            console.log(ev.target.dataItem.dataContext);
            console.log(ev.target.dataItem.dataContext.segments.template);
            let lineSeries = ev.target.dataItem.dataContext.segments.template;
           lineSeries.isActive = !lineSeries.isActive;

        });

मैं आउटपुट के अंदर 'isActive' कुंजी प्राप्त करने में असमर्थ हूं। मैं कंसोल लॉग में 'isBaseSprite: false', 'isHiding: false', 'isShowing: false' देख सकता हूं। लेकिन हमारे पास कॉलम और पाई चार्ट के लिए कोई 'सक्रिय' मौजूद नहीं है।

मैं निश्चित नहीं हूं मुझसे क्या गलत हो रहा है। क्या यह लाइन चार्ट के लिए सही तरीका है?

0
rai-gaurav 8 जुलाई 2019, 13:10

1 उत्तर

सबसे बढ़िया उत्तर

मैंने यहां. मैंने इसे बदल दिया है ताकि यह अब एक स्टैक्ड एरिया चार्ट हो।

समस्या की पहचान करने में मुझे कुछ समय लगा: केवल columns को segments से बदलने से काम नहीं चलता। createSeries फ़ंक्शन में, आपको इन दोनों पंक्तियों की आवश्यकता है:

series.fillOpacity = 0.6; 
series.segments.template.fillOpacity = 0.6;

पहला चार्ट तब होता है जब चार्ट पहले लागू होता है और दूसरा परिभाषित hoverState के जवाब में होता है:

var hoverState = series.segments.template.states.create("active");
hoverState.properties.fillOpacity = 1;

मुझे यकीन नहीं है कि यह एक बग है या नहीं। मैं amCharts' GitHub रेपो में एक समस्या दर्ज करने जा रहा हूँ।

यहाँ पूरा कोड है:

// Apply chart themes
am4core.useTheme(am4themes_animated);

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "country": "Lithuania",
  "research": 501.9,
  "marketing": 250,
  "sales": 199
}, {
  "country": "Czech Republic",
  "research": 301.9,
  "marketing": 222,
  "sales": 251
}, {
  "country": "Ireland",
  "research": 201.1,
  "marketing": 170,
  "sales": 199
}, {
  "country": "Germany",
  "research": 165.8,
  "marketing": 122,
  "sales": 90
}, {
  "country": "Australia",
  "research": 139.9,
  "marketing": 99,
  "sales": 252
}, {
  "country": "Austria",
  "research": 128.3,
  "marketing": 85,
  "sales": 84
}, {
  "country": "UK",
  "research": 99,
  "marketing": 93,
  "sales": 142
}, {
  "country": "Belgium",
  "research": 60,
  "marketing": 50,
  "sales": 55
}, {
  "country": "The Netherlands",
  "research": 50,
  "marketing": 42,
  "sales": 25
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

function createSeries(field, name) {
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "country";
  series.strokeWidth = 2;
  series.yAxis = valueAxis;
  series.name = name;
  series.tooltipText = "{name}: [bold]{valueY}[/]";
  series.tensionX = 0.8;
  series.stacked = true;

  // ********************************************************
  // Both lines are needed!
  // The 1st line makes the segments transparent when the chart
  // initializes. The effect of the second line is for when the
  // hovering over the legend occurs.
  series.fillOpacity = 0.6;
  series.segments.template.fillOpacity = 0.6;
  // ********************************************************

  var hoverState = series.segments.template.states.create("active");
  hoverState.properties.fillOpacity = 1;

  return series;
}

createSeries("sales", "Sales");
createSeries("research", "Research");
createSeries("marketing", "Martketing");

// Add legend
chart.legend = new am4charts.Legend();

// Disable toggling of slices
// chart.legend.itemContainers.template.togglable = false;

// Add 'over' & 'out' events to highlight the segments on hover
chart.legend.itemContainers.template.events.on("over", function(e) {
  var seg = e.target.dataItem.dataContext.segments.template;
  seg.isActive = !seg.isActive;
});
chart.legend.itemContainers.template.events.on("out", function(e) {
  var seg = e.target.dataItem.dataContext.segments.template;
  seg.isActive = !seg.isActive;
});
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<div id="chartdiv" style="height: 400px"></div>
1
pmsoltani 27 अगस्त 2019, 14:14