flexChar 折线图连接点的图形

flexChar 折线图连接点的图形，怎么变成其他的图形，比如三角形，正方形如图下图红框内的图形

谢谢反馈，本帖结贴了，有新的问题欢迎发新帖交流~

KevinChen 发表于 2020-1-22 09:18
对，API只有Box和Dot两种，如果要实现三角形或其它形状，还是要看看自定义series

好的，谢谢啊

对，API只有Box和Dot两种，如果要实现三角形或其它形状，还是要看看自定义series

KevinChen 发表于 2020-1-21 17:35
参考这个例子：

https://demo.grapecity.com.cn/wijmo/demos/Chart/LineArea/StackedLineWithLineMarker ...

谢谢大佬，不过API只有Box，Dot两种图形啊

KevinChen 发表于 2020-1-21 10:43
您好，可以通过自定义系列来解决：

https://demo.grapecity.com.cn/wijmo/demos/Chart/Features/CustomS ...

太高深了，看不懂

您好，可以通过自定义系列来解决：

https://demo.grapecity.com.cn/wi ... CustomSeries/purejs

WijmoJS 的FlexCharts还支持更多的自定义项，可以参考特色功能节点下的其它示例。

参考这个例子：

https://demo.grapecity.com.cn/wi ... thLineMarker/purejs

把以下代码替换到右侧：

1. import 'bootstrap.css';
   
2. import '@grapecity/wijmo.styles/wijmo.css';
   
3. import './styles.css';
   
4. import * as chart from '@grapecity/wijmo.chart';
   
5. import * as animation from '@grapecity/wijmo.chart.animation';
   
6. import { getData } from './data';
   
7. //
   
8. document.readyState === 'complete' ? init() : window.onload = init;
   
9. //
   
10. function init() {
    
11.     let linechart = new chart.FlexChart('#chart', {
    
12.         legend: {
    
13.             position: chart.Position.Bottom
    
14.         },
    
15.         stacking: chart.Stacking.Stacked,
    
16.         chartType: chart.ChartType.LineSymbols,
    
17.         bindingX: 'year',
    
18.         tooltip: {
    
19.             content: ''
    
20.         },
    
21.         series: [
    
22.             { binding: 'africa', name: 'Africa'
    
23.                 ,symbolSize: 20,
    
24.                 symbolMarker: chart.Marker.Box},
    
25.             { binding: 'asia', name: 'Asia' },
    
26.             { binding: 'europe', name: 'Europe' },
    
27.             { binding: 'southAmerica', name: 'South America' },
    
28.             { binding: 'northAmerica', name: 'North America' },
    
29.             { binding: 'oceania', name: 'Oceania' }
    
30.         ],
    
31.         axisY: {
    
32.             title: 'Populations(in millions)'
    
33.         },
    
34.         itemsSource: getData(),
    
35.         palette: getRandomPalette()
    
36.     });
    
37.     //
    
38.     let ani = new animation.ChartAnimation(linechart);
    
39.     //
    
40.     // add a LineMarker
    
41.     var lm = new chart.LineMarker(linechart, {
    
42.         isVisible: false,
    
43.         lines: 'Both',
    
44.         interaction: 'Move',
    
45.         content: (ht) => {
    
46.             if (ht.item) {
    
47.                 let s = `<b>Poplations(in millions)</b></br>Year: ${ht.item.year}`;
    
48.                 for (let key in ht.item) {
    
49.                     if (key !== 'year') {
    
50.                         s += `</br> ${key}: ${ht.item[key]}`;
    
51.                     }
    
52.                 }
    
53.                 return s;
    
54.             }
    
55.             else {
    
56.                 return 'No items here...';
    
57.             }
    
58.         }
    
59.     });
    
60.     //
    
61.     // show the marker when the mouse is over the chart
    
62.     linechart.addEventListener(linechart.hostElement, 'mouseenter', function () {
    
63.         lm.isVisible = true;
    
64.     });
    
65.     //
    
66.     linechart.addEventListener(linechart.hostElement, 'mouseleave', function () {
    
67.         lm.isVisible = false;
    
68.     });
    
69. }
    
70. //
    
71. function getRandomPalette() {
    
72.     let palettes = Object.getOwnPropertyNames(chart.Palettes)
    
73.         .filter(prop => typeof chart.Palettes[prop] === "object" && prop !== 'prototype');
    
74.     let rand = Math.floor(Math.random() * palettes.length);
    
75.     //
    
76.     return chart.Palettes[palettes[rand]];
    
77. }
    

复制代码

关键点：



API：

https://demo.grapecity.com.cn/wi ... o_chart.marker.html