如何在FusionCharts/FusionTime时间序列图表中自定义单条曲线stroke-width

要给CategoryToStyle系列的折线设置自定义的stroke-width，你可以通过在dataSource中添加chart.plotOptions配置来精准控制单个系列的样式，具体修改如下：

修改后的完整代码 #

const MyChart = () => {
    const schema = [
        {
            name: "Category",
            type: "string"
        },
        {
            name: "Time",
            type: "date",
            format: "%Y-%m-%d"
        },
        {
            name: "Value",
            type: "number"
        }
    ]

    const data = [
        ["CategoryToStyle", "2022-09-01", 5],
        ["CategoryToStyle", "2022-10-01", 10],
        ["Category2", "2022-09-01", 2],
        ["Category2", "2022-10-01", 7]
    ]

    const dataStore = new FusionCharts.DataStore().createDataTable(data, schema);

    const chartSettings = {
        type: "timeseries",
        dataSource: {
            data: dataStore,
            series: "Category",
            yAxis: {
                format: {
                    prefix: "$"
                }
            },
            // 新增的系列样式配置
            chart: {
                plotOptions: {
                    series: {
                        "CategoryToStyle": {
                            strokeWidth: 4 // 这里设置你需要的线宽数值，单位为像素
                        }
                    }
                }
            }
        }
    }

    return <ReactFC width={1024} height={1024} {...chartSettings} />
}

关键说明 #

• 在dataSource里新增chart.plotOptions.series配置项，以系列名称（这里是CategoryToStyle）为键，设置对应的strokeWidth属性，数值就是你想要的折线宽度（比如示例中的4像素）。
• 这种方式只会修改指定系列的样式，其他系列（比如Category2）会保持默认的折线宽度，不会受到影响。

内容的提问来源于stack exchange，提问作者sookie